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

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

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

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

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

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

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

  • 相关阅读:
    service
    控制器
    创建私有仓库
    golang xorm MSSQL where查询案例
    golang xorm reverse 自动生成数据库实体文件
    github 获取repo 发布的版本号
    window postgresql 10.4安装
    postgresql 10 数据类型 (完整版)
    postgresql 10 分页
    postgresql 10 ltree 使用说明
  • 原文地址:https://www.cnblogs.com/wangyinqian/p/7840112.html
Copyright © 2011-2022 走看看