欢迎来到飞鸟慕鱼博客,开始您的技术之旅!
当前位置: 首页前端设计正文

jq实现禁止页面上下滚动并隐藏滚动条

墨初 前端设计 4725阅读

在前端的某些场景下,需要禁止用户来上下滚动页面,只有在触发某些事件时才会解除用户对页面上下滚动的限制,而这些功能如果用js该如何实现呢?

jq禁止页面滚动的示例

jq代码

<script>
var top = $(document).scrollTop();
$(document).on('scroll.unable', function (e) {
    $(document).scrollTop(top);
});
</script>

jq解除页面滚动限制代码

如果限制用户滚动页面后,可使用下面的代码来解除限制!

js代码

<script>
$(document).unbind("scroll.unable");
</script>

jq显示与隐藏滚动条

显示与隐藏滚动条只需要对滚动条加上一个css的 overflow 属性即可!

jq代码

<script>
//隐藏滚动条
$('html,body').css({ 'overflow': 'hidden' });
//显示滚动条
$('html,body').css({ 'overflow': 'auto' });
</script>
声明:无特别说明,转载请标明本文来源!