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),但是誰讓需求比較二逼呢對吧~