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

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

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

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

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

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

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

  • 相关阅读:
    鼠标拖动DIV移动
    JS中事件&对象
    响应式与弹性布局
    JS中的变量和输入输出
    JS中的运算符&JS中的分支结构
    HTML基本标签
    CSS基础语法
    JS中循环结构&函数
    String 二
    StringBuffer
  • 原文地址:https://www.cnblogs.com/wangyinqian/p/7840112.html
Copyright © 2011-2022 走看看