導航:首頁 > 編程語言 > js設置頁面不能滾動

js設置頁面不能滾動

發布時間:2025-02-08 14:25:08

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

閱讀全文

與js設置頁面不能滾動相關的資料

熱點內容
微信商戶付款 瀏覽:892
台式機和筆記本如何傳文件 瀏覽:562
vs2008工具箱沒有可用控制項 瀏覽:434
小米4密碼鎖屏 瀏覽:135
微信掃文件小程序 瀏覽:446
資料庫行鎖 瀏覽:361
全局數據邏輯結構是什麼模型 瀏覽:496
資料庫如何分區 瀏覽:579
目標不支持長文件名怎麼辦 瀏覽:666
win7整人程序 瀏覽:804
制定好文件後部門簽什麼意思 瀏覽:417
韓順平第二版java視頻教程xml 瀏覽:241
券商app有什麼作用 瀏覽:276
用微信買火車票安全嗎 瀏覽:386
hg8321r版本刷機 瀏覽:881
死神來了app哪個好 瀏覽:869
linux訪問samba共享文件夾 瀏覽:906
條形統計表用什麼來呈現數據 瀏覽:383
怎麼轉換加密的pdf文件怎麼打開 瀏覽:18
iphone5s圖片不能刪除 瀏覽:411

友情鏈接