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

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

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

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

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

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

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

  • 相关阅读:
    ICMP协议
    观察者模式-Observer
    模板方法模式-Template Method
    Java的演变过程
    汉诺塔-Hanoi
    外观模式-Facade
    JDK5-增强for循环
    JDK5-可变参数
    动态代理与AOP
    代理模式-Proxy
  • 原文地址:https://www.cnblogs.com/wangyinqian/p/7840112.html
Copyright © 2011-2022 走看看