首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

禁止页面滚动的方案

禁止页面滚动的方案 弹窗是一种常见的交互方式,而是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。...当弹出时禁止下的页面滚动,也可以称为滚动穿透的问题,文中介绍了一些常用的解决方案。...实现 首先需要实现一个下滚动的效果示例,当我们点击弹窗按钮显示之后,再滚动鼠标的话能够看到下的页面依旧是能够滚动的。...如果在的内部进行滚动,当内滚动条滚动到底部的时候再继续滚动的话,下的页面也是能够滚动的,这样的交互就比较混乱,文中内容的测试环境是Chrome 96.0.4664.110。 <!...所以如果在内部有元素需要滚动的话,需要用Js控制其逻辑,但是逻辑控制起来又是比较复杂的,我们可以判断事件的event.target元素,如果touch的目标是弹窗不可滚动区域即背景就禁掉默认事件

6K21

你还在用图片做引导

只要在布局页面元素的时候,把需要做的元素确定好,配合js,动态的设置元素的z-index + opacity,就可以很好的做到页面的引导效果。...思路二:使用opacity将非元素半透明 引导内容区域无需改动 页面其他节点元素半透明 我们不再新增,而是完全操作页面节点,将需要遮罩的节点都设置为半透明,引导显现内容则完全显示出来。...操作,依次半透明其他元素,显示当前元素来模拟。...思路五:使用页面节点复制 新增两个div,一个半透明元素和一个内容区域 将页面节点引导内容拷贝到内容区域 将内容区域的大小和位置与原节点引导内容完全重合 页面内容已经做好了,我们需要引导显示某个元素...所以我们就可以在canvas里面绘制一个canvas,然后在中需要显示的内容用xor来绘制重叠,然后重叠内容就会被透明,那么这个透明区域的内容就是我们想要的引导突出内容区域。

2.4K20

【CSS】元素显示隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

一、元素的显示隐藏 ---- 在开发中 , 经常需要使用到 元素的显示隐藏 , 默认状态下 , 按钮下面没有任何内容 ; 将鼠标移动到 红色按钮 后 , 显示一个对话框布局 ;...控制 元素的 显示隐藏 的样式有如下三种 : display visibility overflow 二、display 隐藏对象 ---- 1、display 隐藏对象语法说明 为标签元素设置...display: none 可以 隐藏该元素 ; 如果想要 显示该对象 , 为该元素设置 display: block 即可 ; 2、display 显示元素代码示例 设置 display: block...---- 1、overflow 隐藏对象语法说明 overflow 只能对超出部分隐藏代码 ; overflow 可设置的值 : visible : 子元素超出父容器的部分仍然显示 ; hidden...: 子元素超出父容器的部分隐藏 ; scroll : 不管子元素是否超出父容器 , 都显示滚动条 ; auto : 如果子元素超出父容器显示滚动条 , 如果子元素没有超出父容器不显示滚动条 ; 效果参考

4.9K30

元素的显示隐藏

在CSS中有三个显示隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。...display 显示 display 设置或检索对象是否及如何显示。...display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。 特点: 隐藏之后,不再保留位置。...visibility 可见性 设置或检索是否显示对象。 visible :  对象可视 hidden :  对象隐藏 特点: 隐藏之后,继续保留原有位置。...auto :   超出自动显示滚动条,不超出不显示滚动条 hidden :  不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll :  不管超出内容否,总是显示滚动条

4.3K40
领券