关于移动端滚轮穿透

最新推荐文章于 2024-02-29 13:23:55 发布

weixin_34269583

最新推荐文章于 2024-02-29 13:23:55 发布

阅读量114

点赞数

原文链接：https://my.oschina.net/sjcehui2010/blog/3006362

版权

为什么80%的码农都做不了架构师？>>>

移动端滚轮穿透解决思路

因本例中页面的html是继承父模板，固id选择器只能放在body标签

弹窗时将界面的html固定住，且保持HTML的位置

var scrollTop = document.scrollingElement.scrollTop;
$('#page_content').parents('html').css({"position":"fixed",'top':-scrollTop + 'px'})

关闭弹窗时使其CSS还原,获取此时的CSS像素值，再调整到该位置

var scrollTop = $('#page_content').parents('html').css('top');
scrollTop = scrollTop.replace('-','').replace('px','')
$('#page_content').parents('html').css({"position":"unset"})
document.scrollingElement.scrollTop = scrollTop

转载于:https://my.oschina.net/sjcehui2010/blog/3006362

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34269583

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于移动端滚轮穿透

为什么80%的码农都做不了架构师？>>> ...
复制链接

扫一扫

javascript实现禁止鼠标滚轮事件

10-23

主要介绍了javascript实现禁止鼠标滚轮事件的相关资料,需要的朋友可以参考下

VB6.0鼠标滚轮控件

08-10

在VB6.0环境下，开发人员常常遇到一个问题，那就是默认的开发环境不支持鼠标滚轮功能，这在处理大量代码时无疑增加了不便。为了解决这个问题，我们可以利用一种特殊的控件，即“VB6.0鼠标滚轮控件”，它能够使用户在...

参与评论您还未登录，请先登录后发表或查看评论

移动端（八）滚轮

libufan的博客

07-14

192

ie/chrome : 滚轮事件： onmousewheel //dom0操作； event.wheelDelta //滚轮向上滚动输出120，向下滚动输出-120； firefox : 滚轮事件：DOMMouseScroll 必须用(dom2的标准模式) event.detail //滚轮向上滚动输出-3，向下滚动输出3； ...

实现滚动穿透，保留原本元素的事件，仅实现滚动穿透

qq_46149597的博客

12-15

832

这里滚动穿透的核心就是： 1、position: fixed;保证元素覆盖父级 2、pointer-events: none;取消这个元素的事件实现事件穿透，但因为pointer-events没有单独指定某个事件，所以要js支持 3、监听鼠标滚轮事件，滚动时才添加pointer-events: none;，不滚动就取消添加。

这一次，彻底解决滚动穿透

最新发布

男神的专栏

02-29

855

什么是滚动穿透如图所示，有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。

【Vue实用功能】Vue中实现移动端的scroll滚动

weixin_44590591的博客

04-24

5265

Vue中实现移动端的scroll滚动介绍：在移动端或PC，页面的部分内容需要我们让其在页面滚动，这时候我们都会使用::-webkit-scrollbar来修饰原生滚动条，这样会影响滚动条对宽度的检测，所有就有了该组件，不需要配置横向或纵向滚动，自定义滚动条完全按照原生的方式去显示，如果内容区域存在纵向滚动条，使用它后将替换纵向滚动条组件：vue-custom-scrollbar 安装 //npm npm install vue-custom-scrollbar //yarn yarn add vue

移动端滚动穿透问题完美解决方案

骆天一

10-13

6907

移动端滚动穿透问题完美解决方案

javascript 鼠标滚轮事件

10-30

由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。

vue h5移动端禁止缩放代码

10-16

今天小编就为大家分享一篇vue h5移动端禁止缩放代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

android滚轮选择器

08-24

在Android开发中，滚轮选择器（Wheel View）是一种常见的用户界面组件，它允许用户通过滚动来选择一个值，常用于日期选择、时间选择等场景。本教程将深入探讨如何自定义一个底部弹出的滚轮选择器。一、滚轮选择器...

鼠标穿透是什么意思？

microcosmv的博客

03-11

5232

类似于桌面上显示网易云音乐的歌词的时候，选择固定歌词一样，歌词一旦固定，点击歌词区域是无效的，而直接作用于歌词背景下边的元素。此时鼠标不穿透，无法选中谷歌浏览器此时鼠标穿透，可以点击歌词区域而直接选中谷歌浏览器以上内容仅作为个人学习记录使用。

滚动穿透的6种解决方案【已自测】

weixin_34228387的博客

03-21

1815

在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。这个经典八阿哥也是面试时经常会被追问的问题。相信能看到这篇文章的你，已经是遇到了这个问题。我就不gif展示问题效果了。...

滚动穿透问题完美解决方案

licanty的博客

01-22

2030

滚动穿透：简单的说，滚动穿透就是弹层中有滚动时，滚动弹层滚动条背景下面内容也会滚动；目标：弹层滚动时，背景下面内容不会滚动，弹出层关闭后页面的滚动位置仍在原处不会丢失！下面这段代码直接引用，看效果； <!DOCTYPE html> <html lang="zh-CN" > <head> <meta charset="utf-8"> <

一个基于jquery的滑屏插件（支持移动端手势滑动，滚轮，键盘上下键）

baidu_16685009的博客

05-06

2061

/* @require /statics/js/jquery-1.9.1.min.js*/!function($){ var index = 0, settings = { section: ".panel",//选择器 easing: "linear",//动画效果 scrollSpeed: 300,//动画速度 //scrollbars: true, axis:"y",/...

怎么实现“鼠标穿透”，即鼠标对窗体失去作用，对着它点右键要出现WINDOWS的桌面右菜单

winehero的专栏

12-31

4859

Const LWA_COLORKEY = &H1Const LWA_ALPHA = &H2Const GWL_EXSTYLE = (-20)Const WS_EX_LAYERED = &H80000Const WS_EX_TRANSPARENT As Long = &H20&Private Declare Function GetWindowLong Lib "user32" Alias "G

移动端页面滑动事件穿透问题及其解决方案

一位不知名小前端的一些笔记

01-03

3941

滑动事件穿透：在一个可滚动的列表页中打开弹窗，底部的页面理论上是不可滚动的，但是当滑动弹窗时，底部页面会跟随滚动，这就是所谓的页面滚动穿透的问题。解决方案一：当弹窗显示时，在父元素上添加fix类来禁用滚动；当弹窗隐藏时，移除fix类。 .fix{ height: 100%; overflow: hidden;

移动端实现内滚动的4种方案

xinghuowuzhao的博客

03-06

5156

首先我们可以把这个需求分解为两个小的问题来解决。部分区域固定其余区域滚动部分区域固定为页面的body部分设置`height: 100%`以及`overflow: hidden`，即禁用页面原生的滚动，保证只会显示一屏的内容。固定区域采用绝对定位。其余区域滚动核心属性overflow-ymdn对于overflow-y的定义The overflow-y property specifies wheth...

移动web之滚动篇

掺乎君的博客

05-24

2560

知识点1:移动web滚动问题在移动端，使用滚动来处理业务逻辑的情况有很多，例如列表的滚动加载数据，下拉刷新等等都需要利用滚动的相关知识，但是滚动事件在不同的移动端机型却又有不同的表现，下面就来一一总结一下。滚动事件：即onscroll事件，形成原因通俗解释是当子元素的高度超过父元素的高度时且父元素的高度时定值window除外，就会形成滚动条，滚动分为两种：局部滚动和

vue遮罩层滚轮穿透

05-26

为了防止滚动穿透，可以给遮罩层的父元素设置 `overflow: hidden`，这样在遮罩层出现时，页面的滚动条就会被隐藏掉，避免了滚动穿透的问题。以下是一个示例代码： ``` 显示遮罩层 ...