网页设计时,如何禁止浏览器滚动条滚动

网站建设知识 phpacg 2年前 (2018-04-24) 107次浏览 0个评论

正好项目需求, 记载一下,方便遇到这个效果的冤家。

场景: 点击按钮后弹出暗层, 暗层上有组建需求滚动。需求是暗层里的组建可以运用滚动条, 暗层下的不能同时滚动。

不能用overflow:hidden的方式, 由于原来的必需可以滚动, 假设暗层出来设置overflow:hidden的话会使视窗中的界面突然变宽。

最末尾想的想法是制止document的滚动,并且独自给弹窗内需求滚动的组建绑定事情,不冒泡上去。

最后发现不行,虽然document不滚动了, 但是弹窗是position:fixed的,只需鼠标在弹窗的可滚动的元素上,当这个元素的滚动条究竟部或许顶部时, 暗层下面的东西还是会滚动,并且没有触发document的滚动。

处置方式是 再给弹窗上的元素绑定滚动事情外面加限制条件:当弹窗中的元素的滚动条滚动究竟部或许顶部时,判别滚动是向下还是向下。假设在顶部,且还在向上滚动,则制止了默许事情。反之。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址