1. js如何实现元素滚动 整个页面不动
通过css定位,来设置div在页面滚动中固定不动,
CSS position定位属性
static 元素框正常生产relative 相对版定位: 相对于正常定位进行权偏移
absolute 绝对定位: 相对于其包含块定位.
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
fixed 固定定位: 相对于视窗本身定位,
元素框的表现,类似于将 position 设置为 absolute,不过其包含块是视窗本身。
2. js如何阻止页面往下滚动既阻止scroll事件
你把alert()改成return false;
你现在不行是因为执行你的方法后会进行事件冒泡,执行浏览器自带的滚动事件。
3. javascript中如何设置按下方向键但不滚动页面
借着你的问题我也实验了一下.我用的是jQuery,纯JS写的话浏览器的兼容问题会搞死你.
直接代码:
<script src="jquery.js"></script>
<script>
$(function(){
$(document).keydown(function(event)
{
switch(event.keyCode)
{
case (37):
return false
break
case (38):
return false
break
case (39):
return false
break
case (40):
return false
break
}
});
})
</script>
我本身就是做网站的所以测试的时候用了IE6 7 8 TT FF SAFARI MAX这几个主流的浏览器.欢迎大家测试...
4. js怎么禁止点击滚动条(仅仅是点击拖动滚动条被禁止,鼠标滚轮是可以用的)
<body scroll="no"> //关闭滚动来条,没有滚动条就源无所谓拖动滚动条了
再加上
<script>
var oBody=document.body;
oBody.onmousewheel=function (){
var ch=-1; //滚动幅度,负数表示鼠标上滚,页面上滚;正数表示鼠标下滚,页面反而上滚
oBody.scrollTop+=event.wheelDelta*ch;
}
</script>
加滚动鼠标的事件来调整页面就OK了
不关闭滚动条的话,倒还有种方法可行,不过拖动滚动条时页面会闪烁,不够完美。
<script>
var o=document.body; //这里可以是其他任何元素
var st=0;
setInterval(setScrollTop,100);
o.onmousewheel=function (){
var ch=-1;
st=st+event.wheelDelta*ch;
}
function setScrollTop(){
o.scrollTop=st;
}
</script>
5. js或者jquery实现div不随滚动条滚动
试试这样的吧
<body>
<divid="box"style="height:2000px;width:3000px;">
<divid="div1"style="width:500px;height:500px;background:green;position:absolute;">
<divid="div2"style="width:200px;height:100px;background:lightblue;position:fixed;">里面的div</div>
</div>
</div>
</body>
<scripttype="text/javascript">
varsTop=0;//初始卷起的高度
varsLeft=0;//初始卷起的宽度
varp_div=document.getElementById("div1");//父div
varmax_x=p_div.offsetLeft+p_div.offsetWidth;//父div的右边界
varmax_y=p_div.offsetTop+p_div.offsetHeight;//父div的下边界
window.onscroll=function(){
varc_div=document.getElementById("div2");//子div
vars_top=document.documentElement.scrollTop||document.body.scrollTop;//卷起的高度
vars_left=document.documentElement.scrollLeft||document.body.scrollLeft;//卷起的宽度
if(s_top!=sTop){//纵向滚动,当前卷起的高度和原卷起的高度不一致
sTop=s_top;
c_y=s_top+p_div.offsetTop+c_div.offsetHeight;//子div当前的下边界坐标
if(c_y>=max_y){//如果下边界超过父div下边界
c_div.style.position="relative";
c_div.style.top=(p_div.offsetHeight-c_div.offsetHeight)+"px";
c_div.style.left=s_left+"px";
}else{
c_div.style.position="fixed";
c_div.style.top="";
c_div.style.left="";
}
}
if(s_left!=sLeft){//纵向滚动
sLeft=s_left;
c_x=s_left+p_div.offsetLeft+c_div.offsetWidth;
if(c_x>=max_x){
c_div.style.position="relative";
c_div.style.left=(p_div.offsetWidth-c_div.offsetWidth)+"px";
c_div.style.top=s_top+"px";
}else{
c_div.style.position="fixed";
c_div.style.left="";
c_div.style.top="";
}
}
}
</script>
6. 完美解决js 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动
当前的项目遇到了这个问题,
当打开dialog的时候,希望主页面的滚动条不要滚动。
一番搜索之后,发现大家的解决办法分为两种。
一种就是隐藏滚动条 ,但稿培袜是这样的话,前台页面会因为滚动条的隐藏和出现而发生宽度的变化。
这就使得每次一打开dialog页面就会伸缩。十分难受。
第二种 就是不知道从哪儿抄的这种方法。
一番修中租改之后,我也没好用。
最后 终于在外网找到键激个完美解决方案。
根据需求自行修改。
*(在scrollTo方法中,最好加上behavior:'instant')
7. 如何禁止页面向下滑动
1,依靠css 将页面
document.documentElement.style.overflow='hidden';
document.body.style.overflow='hidden';//手机版设置这个。
如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。
但是 你用键盘的 上下左右键,你会发现,页面仍然可以滚动。 别着急 往下看
2,在 1 的基础上 添加 js功能
var move=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
return false;
}
var keyFunc=function(e){
if(37<=e.keyCode && e.keyCode<=40){
return move(e);
}
}
document.body.onkeydown=keyFunc;
好了 ,到了这里,你会发现页面木有任何问题了。鼠标,键盘 都不能将页面滚动。
不过....对于高级用户来说,仍然有问题,比如 继续往下看
3,假设用户希望 滚动条 一直处于显示状态 肿么办捏???? ok ,继续
var st
var scroll=function(e){
clearTimeout(st);
st=setTimeout(function(){
window.scrollTo(loc.scrollLeft,loc.scrollTop);
},5);
}
window.onscroll=scroll;
上述代码 可以似的 用户的任何滚动操作,都将被还原。注意这个方式很消耗内存(虽然做了setTimeout),但是谁让需求比较二逼呢对吧~