在前端的某些场景下,需要禁止用户来上下滚动页面,只有在触发某些事件时才会解除用户对页面上下滚动的限制,而这些功能如果用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>
到此这篇关于jq如何实现禁止页面上下滚动并隐藏滚动条就介绍到这了。从来没有得罪过人的人,注定不能与人深交,过分的平与与宽容,反而丧失了做人的准则与尊严。更多相关jq如何实现禁止页面上下滚动并隐藏滚动条内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!