zoukankan      html  css  js  c++  java
  • 遮罩层遮住滚动条,禁止滚动条滚动

    很多同学在遇到这个问题的时候,会认为这是一个js问题。的确,js可以解决这个问题,但其实有比js更好的一个解决方案,而这个方案就是今天要分享的东西,通过简单的HTML布局就解决此问题。具体实现步骤如下:

    一、不要把滚动条加到根节点上,而是自己写一个块。

    二、块有了,给这个块设置与屏幕宽高相等的宽度和高度。

    三、给这个块设置overflow-y:scroll让滚动条出现。

    四、添加遮罩层,遮罩层与添加的块同级,宽高与屏幕宽高也相等。

    这些操作都做完以后,你就会发现,鼠标在遮罩层上边滚动滑轮,滚动条也不动了,只有遮罩层消失,在滚动,才可以继续正常得滚动条。其中原理,就是因为滚动条加给了块,而滚动区域,也就被约定到了整个块范围内,新增的遮罩层,与块同级,并不在块范围之内,也就是可拖拽范围内,这个时候你无论如何滚动,也无法滚动滚动条了。

  • 相关阅读:
    js 获取表单和页面控件数据
    vue axios upload 多个文件
    vue antd axios 使用
    antd vue 修改modal弹窗样式
    线性回归的改进-岭回归
    线性回归
    00
    集成学习方法之随机森林
    决策树
    第十讲 让机器像人类一样学习--强化学习-----学习总结
  • 原文地址:https://www.cnblogs.com/wangyinqian/p/7840112.html
Copyright © 2011-2022 走看看