首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

锤子js >如何在页面滚动时阻止水平平移

在页面滚动时阻止水平平移可以通过以下几种方式实现:

  1. CSS属性overflow-x: hidden:通过将页面的水平滚动条隐藏起来,可以阻止页面的水平平移。在需要阻止水平平移的元素上添加该属性即可。例如:
代码语言:txt
复制
body {
  overflow-x: hidden;
}
  1. JavaScript事件监听:通过监听页面滚动事件,当滚动发生时,阻止默认的水平平移行为。可以使用addEventListener方法来添加滚动事件监听器,并使用preventDefault方法来阻止默认行为。例如:
代码语言:txt
复制
window.addEventListener('scroll', function(event) {
  event.preventDefault();
});
  1. jQuery插件:如果你使用了jQuery库,可以使用一些插件来实现阻止水平平移的效果。例如,可以使用jQuery的mousewheel插件来监听鼠标滚轮事件,并阻止默认的水平平移行为。具体使用方法可以参考插件的文档。

需要注意的是,以上方法只是阻止了页面的水平平移行为,但并不会影响垂直方向的滚动。如果需要同时阻止垂直方向的滚动,可以将以上方法稍作修改即可。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云云数据库MySQL版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iot
  • 腾讯云移动开发(MPS):https://cloud.tencent.com/product/mps
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jimojianghu

此外,对 document 处理了滚轮事件后,因为该事件会传播冒泡,所以需要注意页面上其他的子元素——如果有滚动条之类的,需要在子元素上阻止冒泡,不然后滚动会失效。...none 当触控事件发生在元素上,不进行任何操作。 pan-x 启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和/或 pinch-zoom 组合使用。...禁用双击可缩放功能可减少浏览器在用户点击屏幕延迟生成点击事件的需要。 触摸动作也经常用于完全解决由支持双击缩放手势引起的点击事件的延迟。 pinch-zoom 启用多手指平移和缩放页面。...但需要注意滚轮默认事件,会导致子元素滚动失效,这时候就要在子元素上阻止相同事件冒泡。...passived 实际上就是告诉浏览器,某个事件监听是否会使用 preventDefault 来阻止默认行为,便于浏览器优化性能。特别是浏览器优化页面滚动的性能,可以让页面滚动更顺滑。

3.8K00

【No Problem】如何解决 Mac 左右滚动误触返回事件?

这个边界触发就是滚动到“超过”滚动区域的水平边界才会触发,我自己称这个为浏览器的滚动溢出行为(我觉得这样容易理解),也就是其实正常的滚动不会触发 那我们是不是可以在这个边界上做一些特殊的处理呢?...产品可能也并不同意这么做,并不是一个很好的解决方案 解决方案三——JavaScript 阻止事件 上面我们提到只有滚动到“超过”滚动区域的水平边界才会触发,那么我们只要监听 mousewheel 这个事件...*/ .container { overscroll-behavior-x: none; } 见 MDN[2] 中的定义 overscroll-behavior-x 这个 CSS 属性用来控制当滚动到区域的水平边界的浏览器行为...默认情况下,平移滚动)和缩放手势由浏览器专门处理。设置 none,当触控事件发生在元素上,不进行任何操作。...小结 Mac 中左右滚动导致返回的原因是滚动“超过”滚动区域的水平边界,可以使用 JavaScript 在边界条件中阻止事件,也可以通过 CSS 的 overscroll-behavior-x 控制滚动的行为

2.1K10
  • 【总结】1823- 移动端滚动穿透与滚动溢出解决方案

    滚动穿透 问题描述 在移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滚动,看起来好像事件穿透到下面的...pinch-zoom 启用页面的多指平移和缩放。 于是在 popup 元素上设置该属性,禁用元素(及其不可滚动的后代)上的所有手势就可以解决该问题了。....popup { touch-action: none; } Note: [无障碍设计] 阻止页面缩放可能会影响视力不佳的人阅读和理解页面内容,不过小程序本身好像就不可以缩放!...() }) 滚动溢出 问题描述 如上录屏所示,弹窗内也含有滚动元素,在滚动元素滚到底部或顶部,再往下或往上滚动,也会触发页面滚动,这种现象称之为滚动链(scroll chaining), 但是感觉滚动溢出...✅ 解决方案B (event.preventDefault) 借用 event.preventDefault 的能力,当组件滚动到底部或顶部,通过调用 event.preventDefault 阻止所有滚动

    53411

    探究 css touch-action 属性

    See 这样的bug 然后找了一通发现可以用 *{touch-action:none}这个方法 用法是禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放行为(地图或游戏表面...当手势开始,浏览器与触摸的元素及其所有祖先的触摸动作值相交直到一个实现手势(换句话说,第一个包含滚动元素)的触摸动作值。...值 auto 当触控事件发生在元素上,不进行任何操作。 none 当触控事件发生在元素上,不进行任何操作 pan-x 启用单指水平平移手势。...pinch-zoom 启用多手指平移和缩放页面。 这可以与任何平移值组合。...示例 最常见的用法是禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放行为(地图或游戏表面) #map { touch-action: none; } 另一种常见的模式是使用指针事件处理水平平移的图像轮播

    1.8K10

    touch-action导致安卓页面无法滚动

    其实就是是否阻止默认事件200ms延迟然后再执行滚动行为,而之前的fastclick就是通过去掉这部分来避免点击延迟的。...就是ios基本都可以的,但是安卓中的页面滚动都没了。这是为什么呢?这个就要看下touch-action的更官方的触摸说明了。 默认情况下,平移滚动)和捏手势由浏览器独占处理。...当手势开始,浏览器将触摸元素及其所有祖先的触摸动作值与实现手势的触摸动作值(换句话说,第一个包含滚动元素)相交。...文档参考来源:touch-action 说人话 这段话阐明的就是触摸事件整个的进行过程,既然它可以通过css来约定滚动的行为,那么就意味着你写了touch-action:none,就会导致原来的页面滚动失效了...这就是安卓上无法页面滚动的原因。 为什么ios没有受影响呢,我觉得可能是ios默认支持touch事件的原因吧。如果你知道底层的原因或者详细的文档说明,可以告诉我哦。

    4.2K00

    前端测试题:(解析)如果要获取鼠标在当前文档中的位置,可以使用下面哪些属性?

    考核内容: 鼠标事件 题发散度: ★ 试题难度: ★ 解题: JS在触发事件,会自动生成event对象传入到事件函数中。...鼠标相对于浏览器的X,Y的坐标位置(不包含滚动条) event.clientX; event.clientY; pageX&pageY:触发事件,鼠标相对于网页的X,Y的坐标位置(包含滚动条)...):阻止冒泡或捕获 event.stopPropagation(); 一图以概之 总结:event事件中的属性: pageX返回触发鼠标事件,鼠标指针相对于当前页面(文档)的水平坐标, pageY...返回触发鼠标事件,鼠标指针相对于当前页面(文档)的垂直坐标; screenX返回窗口/鼠标指针相对于屏幕的水平坐标, screenY返回窗口/鼠标指针相对于屏幕的垂直坐标; clientX返回触发鼠标事件...,鼠标指针相对于当前窗口的水平坐标, clientY返回触发鼠标事件,鼠标指针相对于当前窗口的垂直坐标; offsetX返回鼠标指针相对于目标元素边缘位置的水平坐标, offsetY返回鼠标指针相对于目标元素边缘位置的垂直坐标

    1.1K30

    京东微信购物首页性能优化实践

    关键渲染通常来说是指首屏渲染(用户第一眼可见区域)、页面的核心内容部分(这个也有点抽象)。 关键渲染路径的三个属性 关键资源:可能阻止网页首次渲染的资源。划重点:阻止网页首页渲染。...JS、CSS 异步加载 ,图片资源懒加载(快进入可视区域加载)。...网页应该在设置动画或滚动,在 10 毫秒以内生成帧。 网页应该最大程度增加主线程的空闲时间。 网页应该持续吸引用户;在 1000 毫秒以内呈现交互内容。...我们把之前通过 JS 渲染的 DOM 直接以页面片形式引入,并将 CSS 样式内联,这样搜索框能在首屏加载就显示出来,然后我们将 3 个 JS 文件合并成一个,这样就加快了搜索框的初始化。...3、滚动优化 当直接监听页面滚动时间,由于滚动事件触发频率很高,即使一个简单的 handler 函数也会造成大量的开销。

    1.2K20

    《101 Windows Phone 7 Apps》读书笔记-Groceries

    背景平移的速度最慢,其次是标题,平移速度最快的是内容,它以普通的滚动/切换的速度进行平移。图27.2展示了访问图27.1中的每个Section,屏幕所展示的页面内容。 ?...另外,Panorama在同一个Section中支持更加好的水平滚动,这使得宽度可变的Section更容易实现。     在其他方面,Pivot也有胜过Panorama的优势。...Horizontal Panorama Items and Their Headers     系统内置应用中的Panorama控件, Panorama Item在水平状态并且比屏幕要宽,它的标题的平移速度要比内容的平移速度慢...➔ 由于Panorama是水平切换的,因此在背景右边沿与左边沿的连接处,会出现一条“缝隙”,除非我们使用指定的美工设计(游戏Hub)或者是纯色的背景(人脉Hub)。...在这里使用按钮控件的原因是:按钮的单击事件只有在用户的单击动作下触发,而非平移动作。这就使得用户可以在无意中点击按钮,也可以对Panorama进行平移

    1.3K50

    京东微信购物首页性能优化实践

    关键渲染通常来说是指首屏渲染(用户第一眼可见区域)、页面的核心内容部分(这个也有点抽象)。 关键渲染路径的三个属性 关键资源:可能阻止网页首次渲染的资源。划重点:阻止网页首页渲染。...JS、CSS 异步加载 ,图片资源懒加载(快进入可视区域加载)。...网页应该在设置动画或滚动,在 10 毫秒以内生成帧。 网页应该最大程度增加主线程的空闲时间。 网页应该持续吸引用户;在 1000 毫秒以内呈现交互内容。...我们把之前通过 JS 渲染的 DOM 直接以页面片形式引入,并将 CSS 样式内联,这样搜索框能在首屏加载就显示出来,然后我们将 3 个 JS 文件合并成一个,这样就加快了搜索框的初始化。...3、滚动优化 当直接监听页面滚动时间,由于滚动事件触发频率很高,即使一个简单的 handler 函数也会造成大量的开销。

    1.6K20

    10-移动端开发教程-移动端事件

    在前端的移动Web开发中,有一部分事件只在移动端产生,触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1....,浏览器会智能的缩放当前页面到原始大小。 ​...最基本的touch事件包括4个事件: touchstart: 当在屏幕上按下手指触发 touchmove: 当在屏幕上移动手指触发 touchend: 当在屏幕上抬起手指触发...hammer.js hammer提供了不仅仅tap、swipe等事件,还提供了:pan(平移)、pinch类(捏拿缩放)、 press类(按住)、 rotate类(旋转)类手势支持, hammer.js...注意:zepto并没有阻止click事件,所以使用zepto的tap事件依然会导致点击穿透问题,你需要手动添加 e.preventDefault() 来阻止click事件。

    6.4K70

    控制页面滚动:自定义下拉到刷新和溢出效果

    但是请注意,如果用户继续滚动会发生什么情况。抽屉后面的内容开始滚动滚动由父容器占领;例子中的主页面本身 被证实这种行为称为滚动链接;滚动内容浏览器的默认行为。...开发人员最终编写不必要的JavaScript,添加非被动触摸监听器(阻止滚动),或者将整个页面粘贴到100vw / vh中(以防止页面溢出)。...最终的结果是当用户到达聊天记录的顶部/底部,主页面保持放置状态。在聊天框中开始的滚动不会传播出去 ?...(示例效果) 总结 本文主要是针对页面上的滚动,自定义下拉刷新与溢出效果,通过css中的overscroll-behavior:container阻止滚动链接,也就是在触发子元素的事件操作,不会传递给父级元素...,相当于是阻止事件的冒泡,当然阻止滚动链接在页面上有水平方向的,也有垂直方向的,垂直方向上设置overscroll-behavior-y:none:可在下拉滚动禁用反弹效果(橡皮筋效果) 当然文中的刷新动画效果是

    3.4K20

    那些前端常用的网站插件

    — 快速实现全屏滚动特性 Typed.js — 打字机效果 Waypoints.js — 滚动到某个元素位置触发一个功能 Highlight.js — web 语法高亮 Chart.js — 使用 JavaScript...创建漂亮的图表 Instantclick — 能够明显加速网站加载时间,鼠标 hover 预加载资源 Chartist — 另一个图表库 Motio — 一个基于动画和平移的雪碧图库 Animsition... — CSS 实现动画过渡的 jQuery 插件 Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片的可视化 diff 工具 Vivus.js — 在 SVG 上绘制动画 Wow.js... — 滚动展现动画 Scrolline.js — 页面滚动显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画...Handlebars.js — Javascript 模板 jInvertScroll — 视差滚动 One page scroll — 又一个页面滚动库 Parallax.js — 对智能设备方向变化做出响应的视差引擎

    4.4K50

    2016.06 第三周 群问题分享

    webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; /*规定子元素水平排列还是垂直排列...vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; /*水平对齐...-- 优先播放音乐bg.ogg,不支持在播放bg.mp3 --> 解决视音频无法自动播放的问题,可以通过JS来触发自动播放(操作window,播放音乐) $(window).one(...通常我们为了防止页面滚动,会调用event的preventDefault()可以阻止默认事件的发生,达到阻止页面滚动的效果 touchend——当手指离开屏幕触发 touchcancel——系统停止跟踪触摸时会触发...通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动 MSPointerUp——当手指离开屏幕触发 如何用jQuery实现两个

    97890

    jQuery事件对象

    //screenX和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面左上角的位置(忽视滚动条) //pageX和pageY 距离页面最顶部的左上角的位置...(会计算滚动条的距离) //event.keyCode 按下的键盘代码 //event.data 存储绑定事件传递的附加数据 //event.stopPropagation...() 阻止事件冒泡行为 //event.preventDefault() 阻止浏览器默认行为 //return false:既能阻止事件冒泡,又能阻止浏览器默认行为。...对象) $(selector).each(function(index,element){}); 【案例:不同的透明度.html】 多库共存 jQuery使用作 为 标 示 符 , 但 是 ...果 与 其 他 框 架 中 的 作为标示符,但是如果与其他框架中的作为标示符,但是如果与其他框架中的冲突,jQuery可以释放$符的控制权.

    1.5K30

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

    ps:我偷懒直接js控制了行间样式,但标准写法应该是给body添加类名来控制 局限问题: body滚动后再触发弹层,会使body页面回滚到顶部。...因此还需要我们对弹层的可滚动区域的滑动事件做监听: 第一种情况,若向上滑动,到达底部;或者第二种情况,若向下滑动,已到顶部。 这两种情况任意一种发生,就阻止滑动事件。 这段逻辑代码如下: ?...三、body滚动 + 弹层无滚动[js-阻止弹层中touchmove的默认行为] 适用场景:   1、(适用)body可滚动   2、(适用)触发弹层出现的按钮可以在任意位置 需满足以下条件:     ...就能阻止滚动穿透。 关键代码: js控制弹窗的交互、弹窗的禁止滚动 ?...4、如果手势是向上滑,且页面现在滚动的位置刚好是整个可滚动高度——弹窗内容可视区域高度的值,说明上滑到底,阻止默认事件。

    13.6K31

    54个CSS重难点整理,12-24篇,进阶高薪必需要掌握的知识点

    CSS同时被加载 引入的CSS要等页面加载完毕后再加载 DOM可控性 js控制DOM,可以通过插入link标签来改变样式 不能通过@import改变样式 15、常见的图片格式与场景?...减少使用 @import,建议使用 link,因为 link 在页面加载一起加载,import 是页面加载完成之后再加载。...元素的位置在屏幕滚动不会改变,⽐回到顶部的按钮都是用的fixed固定定位 sticky 粘性定位,基于用户的滚动位置来定位。...而当页面滚动超出目标区域,它以固定定位呈现,否则以相对定位呈现。...在有滚动条的页面中,absolute 会跟着父元素进行移动,fixed 固定在页面的具体位置。

    1.2K10

    微信小程序开发实战(1):容器组件

    scrollLeft:水平滚动滚动条当前的位置,在垂直滚动该值为0。 scrollTop:垂直滚动滚动条当前的位置,在水平滚动该值为0。...scrollHeight:垂直滚动所有子视图的总高度(包括子视图之间的间距),在水平滚动,该值是scroll-view组件的高度。...scrollWidth:水平滚动所有子视图的总宽度(包括子视图之间的间距)。在垂直滚动,该值是scroll-view组件的宽度。...deltaX:水平滚动的增量,也就是从当前滚动条的位置移动到新位置的距离。从左向右水平移动,该值小于0,从右向左水平移动,该值大于0。通过该属性值可以判断水平移动的方向。...图8是垂直和水平滚动触发滚动事件输出的日志信息,其中也包含滚动到边缘输出的日志信息。 ? 图8 滚动输出的日志

    1.3K30

    Hijack攻击揭秘

    或许当你发布状态,已经不知情的被攻击者重定向到了其他恶意的页面。 常见的Clickjacking攻击手法 通过Flash打开受害者的摄像头或麦克风 诱使用户在不知情的情况下粉某人(- -!...所以说如果页面滚动,或者页面自适应大小,导致两个iFrame发生错位,攻击就不能成功。这个问题可以通过读取URL中的段标识符解决。...实现原理是,这个插件阻止JS创建iframe。不过这个插件只能运行于firefox和基于其内核的浏览器。...服务端防护 Frame Busting Frame Busting是一种在服务器端插入JS脚本来阻止浏览器嵌套加载Iframe的安全机制。...只要在每个页面加一段短小精悍的JS代码,就可以把hacker拒之门外。 if(top !

    1.9K90
    领券