JS-設定彈窗時候禁用滾動條
阿新 • • 發佈:2018-11-28
方法一
啟用禁用時,設定js
document.documentElement.style.overflowY = 'hidden';
當還原時候,只需要把屬性重置scroll就可以了
document.documentElement.style.overflowY = 'scroll';
方法一僅僅是滾動條的隱藏和顯示。如果想要在顯示滾動條條件下,實現這一功能,需要繫結scroll的事件
啟用禁用時
var tops = $(document).scrollTop();//當頁面滾動時,把當前距離賦值給頁面,這樣保持頁面滾動條不動 $(document).bind("scroll",function (){$(document).scrollTop(tops); });
當重置時,只需要解綁此事件
$(document).unbind("scroll");
兩種方法可以應對不同的使用情景,隱藏滾動條的方法(方法一)在實際操作時,因為滾動條會佔位,所以視覺上會出現螢幕變大縮小的效果,所以還需要對滾動條的佔位進行一個設定
隱藏滾動條時:
window.innerWidth //瀏覽器可用寬度
document.body.clientWidth// body的寬度
var m=window.innerWidth-document.body.clientWidth;//滾動條的寬度
document.documentElement.style.marginRight=m+"px";
//或者
document.documentElement.style.paddingRight=m+"px";
//這樣就會把滾動條的佔位處理好
//顯示滾動條:
document.documentElement.style.marginRight="0px";
//或者
document.documentElement.style.paddingRight="0px";
//此時還可能存在一個問題,自己的彈出框在開啟關閉的時候會有輕微的位移,也是因為滾動條的緣故,所以根據自己的需要,來進行設定修改
//隱藏滾動條開啟彈窗時:
//顯示滾動條關閉彈窗時:$('彈窗').css("right",m+"px");//根據自己需要調整屬性
$('彈窗').css("right","0px");//根據自己需要調整屬性
//方法二在滾動時,大多數的瀏覽器都可以適應,但是IE瀏覽器會出現比較明顯的滾動強制重置 效果。
//bootstrup的模態框是一種不錯的彈出框,完美解決了滾動條的問題,如果沒有特殊要求,可以考慮bootstrup。