在写一个在页面中,经验证用户没有登录或会话时候失效弹出登录框禁止页面滚动用到
今天搞了一个功能,上下左右居中,模仿QQ空间里的样式,把横向和纵向滚动条禁止掉代码如下:
<script type =“text / javascript”>
//禁止滚动条
$(document.body).css({
“overflow-x”:“hidden”,
“overflow-y”:“hidden”
});
//启用滚动条
$(document.body).css({
“overflow-x”:“auto”,
“overflow-y”:“auto”
});
</ script>
我相信大家对这个代码应该无异议吧,如果有请高手给予指点。测试结果如下:
IE6:禁止滚动条正常,启动滚动条错误,出现双滚动条且滚动条滚动页面无反应。
IE7:禁止滚动条正常,启动滚动条正常。IE9
:禁止滚动条正常,启动滚动条正常.EK9
:禁止滚动条正常,启动滚动条正常
.Chrome:禁止滚动条正常,启动滚动条正常。 禁止滚动条正常,启动滚动条正常
.FireFox:
靠,又是IE6 IE7和,微软真的该反省了,所以说做产品得一开始就要负责人。别扯远了,解决方法是当溢出设置隐藏以后,直接取消这个风格而不要设置溢出,具体代码如下:
//为了简便定义一个
样式类<style type =“text / css”>
.html-body-overflow
{
overflow-x:hidden;
溢出-γ:隐藏;
}
</ style>
<script type =“text / javascript”>
//禁止滚动条(默认是没有附加这个样式类的)
$(document.body).toggleClass(“html-body-overflow”);
//启动滚动条
$(document.body).toggleClass(“html-body-overflow”);
</ script>
当然也可以直接清掉style的内容,不过上面的做法更直观,更简单。
禁止 和 启用 浏览器 滚动条
猜你喜欢
转载自blog.csdn.net/qq_42383787/article/details/83180396
今日推荐
周排行