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

Jquery鼠标滚轮事件在移动设备上不起作用

是因为移动设备通常没有物理鼠标滚轮,因此无法触发该事件。在移动设备上,可以使用触摸事件来替代鼠标滚轮事件。

触摸事件是移动设备上常用的交互方式,可以通过触摸屏幕上的手势来实现滚动效果。在Jquery中,可以使用touchstarttouchmovetouchend等触摸事件来实现滚动效果。

以下是一种常见的实现方式:

代码语言:txt
复制
$(document).on('touchstart', function(e) {
  // 记录触摸开始时的位置
  var startY = e.originalEvent.touches[0].pageY;
});

$(document).on('touchmove', function(e) {
  // 计算触摸移动的距离
  var deltaY = e.originalEvent.touches[0].pageY - startY;

  // 根据触摸移动的距离来实现滚动效果
  // 可以使用scrollTop()方法来改变滚动位置
  $(window).scrollTop($(window).scrollTop() - deltaY);

  // 阻止默认的滚动行为
  e.preventDefault();
});

这段代码会在移动设备上监听触摸事件,并根据触摸移动的距离来改变滚动位置。通过$(window).scrollTop()方法可以获取或设置滚动位置。

这种方式可以在移动设备上模拟鼠标滚轮的效果,实现类似的滚动体验。

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jquery nicescroll 配置参数

默认为​​“递四方” zIndex的 - 改变z-index值的滚动条的div,默认值是9999 scrollspeed - 滚动速度,默认值为60 mousescrollstep - 高速滚动鼠标滚轮...默认:true) autohidemode,如何隐藏滚动条的作品,真=默认/“光标”=只进游标隐藏/ false =不隐藏背景,CSS改变轨道的背景下,默认为“” iframeautoresize,加载事件...,冒泡鼠标滚轮事件(默认:true) railoffset,您可以添加抵消顶部/左边的轨道位置(默认:false) bouncescroll,使滚动弹跳在内容结尾作为移动像(仅HW ACCELL)(...(defaul:“底部”) enabletranslate3d,nicescroll可以使用CSS转换为滚动内容(默认:true) enablemousewheel,nicescroll可以管理的鼠标滚轮事件...(默认:true) enablekeyboard,nicescroll可以管理键盘事件(默认:true) smoothscroll,滚动自如移动(默认:true) sensitiverail,点击轨道上进行滚动

4.1K80

随心所欲的滚动条,远离产品汪(二)

于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。...滚轮事件及兼容问题概要 鼠标上,除了点击、拖拽等事件,当然也少不了滚轮事件了,但是比较有意思的一点是,平常大家碰到兼容问题首先想到了IE这个万年背锅侠,但是这次还真不是,火狐别树一帜的凑了一回热闹。...1.滚轮事件中,火狐的的滚动事件是DOMMouseScroll,而其它浏览器是mousewheel,这一点是要仔细留意的。 2.事件对象的兼容中。...首先,我们需要明白我们的滚轮作用在谁的身上,根据实际需求来进行事件绑定,当我们鼠标移入可视区时,会触发滚轮事件移出可视区时则清除滚轮事件,接下来进行具体代码操作。...ps:此处为了方便理解使用jQuery来实现,记得引入呦。 较之上篇的实现代码,本篇中增加了两个变量。

2K80

jQuery 之 元素节点操作滚轮事件与函数节流

2、prepend()和prependTo():现存元素的内部,从前面插入元素 3、after()和insertAfter():现存元素的外部,从后面插入元素...4、before()和insertBefore():现存元素的外部,从前面插入元素 删除节点 : $('#div1').remove(); todolist(计划列表)实例 滚轮事件与函数节流 jquery.mousewheel...插件使用 jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jquery滚轮事件插件jquery.mousewheel.js。...函数节流 javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件事件内多处触发执行绑定的函数...images/003.png"> Web前端开发在产品开发环节中的作用变得越来越重要

1.3K60

如何使用jQuery操作浏览器窗口事件?【jQuery框架应用入门15】

本文主要针对浏览器的窗口事件做一些简要介绍,只让读者可以入门操作bom有关的事件。...这些事件浏览器窗口比较直观,但实际上这两种情况也可以发生在html元素的某个节点上。本节以较为直观的浏览器窗口事件为例来说明jQuery中窗口事件的使用。案例源代码: <!...中的scroll事件是当滚轮出现时,用户使用鼠标滚轮滚动或者点击滚动条滚动才会发生的事件。...根据业务需要,有时候没有滚动条情况下要触发鼠标滚动事件,如在页面中实现图片切换效果,就要回归使用JavaScript的方式将document绑定到mousewheel事件上。...代码如下所示: document.onmousewheel = function() { //鼠标滚轮滚动后发生的代码 };

5510

接上一篇事件详解

mouseenter事件鼠标光标从元素外部移动到元素范围之内被触发;这个事件不冒泡; mousemove事件:当鼠标指针元素内部移动时重复地触发。...也都实现了这个事件,当用户通过鼠标滚轮与页面交互,垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件,这个事件可以在任何元素上触发,最终会冒泡到document(IE8)或window...,也是鼠标滚轮滚动时触发,与mousewheel事件一样,但是他的有关鼠标滚轮信息保存在detail属性中,当鼠标向前滚动时,这个属性值是-3的倍数,当鼠标滚轮向后滚动时,这个属性值是3的倍数;也可以给...—orientationchange事件 苹果公司为移动safari添加的orientationchange事件是能让用户确定何时将设备由横向查看模式切换到纵向模式触发的事件;此属性中包含三个值,0表示肖像模式...;90表示向左旋转的横向模式(主屏幕按钮右侧),-90表示向右旋转的横向模式(主屏幕按钮左侧), 理解移动端的事件—触摸与手势事件 有以下几个触摸事件: touchstart: 当手指触摸屏幕时触发

1.8K60

C++ Qt开发:Charts折线图绑定事件

鼠标移动事件 (mouseMoveEvent): 当鼠标移动时触发。该函数中,你可以处理鼠标移动时的逻辑,如实时更新鼠标位置、进行拖拽操作等。...鼠标滚轮事件 (wheelEvent): 当鼠标滚轮滚动时触发。你可以该函数中处理鼠标滚轮事件,如放大缩小、滚动视图等。 键盘按下事件 (keyPressEvent): 当键盘按键被按下时触发。...*parent = 0); ~QWChartView(); signals: // 鼠标移动信号mouseMoveEvent()事件中触发 void mouseMovePoint...鼠标移动事件 (mouseMoveEvent): 发射鼠标移动信号,可以用于实时显示鼠标位置等。...鼠标滚轮事件 (wheelEvent): 根据滚轮滚动方向,调整 g_x 的值,然后使用 zoom 方法进行缩放。

25310

jquery 滚轮插件 jquery.mousewheel.js

jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件,那么可以使用jquery滚轮事件插件jquery.mousewheel.js。...下载jquery.mousewheel的js文件 访问Github之后,主要jquery需要用到这两个js文件。 ? 那么先将项目git clone下来。 ? ?...jQuery Mouse Wheel Plugin A jQuery plugin that adds cross-browser mouse wheel support with delta normalization...虽然说这种用法在后面的版本会被抛弃,但是现在最新的版本是4年前的,那么还是可以用用看看。 编写示例 ? 滚轮滚动的时候,会打印三个参数的值。 deltaX:值为负的(-1),则表示滚轮向左滚动。...值为正的(1),则表示滚轮向右滚动。 deltaY:值为负的(-1),则表示滚轮向下滚动。值为正的(1),则表示滚轮向上滚动。 deltaFactor:增量因子。

4.8K20

cocos creator鼠标键盘事件总结

node.on('mousedown', function (event) { console.log('Mouse down'); }, this); 鼠标事件类型和事件对象 鼠标事件桌面平台才会触发...'mouseenter' 当鼠标移入目标节点区域时,不论是否按下 cc.Node.EventType.MOUSE_MOVE 'mousemove' 当鼠标目标节点在目标节点区域中移动时,不论是否按下...当鼠标从按下状态松开时触发一次 cc.Node.EventType.MOUSE_WHEEL 'mousewheel' 当鼠标滚轮滚动时 鼠标事件(cc.Event.EventMouse)的重要 API...或 cc.Event.EventMouse.BUTTON_RIGHT 或 cc.Event.EventMouse.BUTTON_MIDDLE 触摸事件类型和事件对象 触摸事件移动平台和桌面平台都会触发...,这样做的目的是为了更好得服务开发者桌面平台调试,只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件

2.1K51

Figma 的画布缩放功能说明

下面是找到排序数组中,目标值两边的数组元素的方法。...但有些情况下,用户会觉得这样缩放幅度可能有点大了,需要幅度更低的缩放,这时候可以用鼠标滚轮缩放。...鼠标滚轮缩放 Figma 也支持通过滚轮的方式缩放,且会 基于缩放比率 zoomRatio,并以光标位置为缩放中心进行缩放。 按住 Ctrl 或 Command,滚轮向前为放大,向后为缩小。...(下面是 Windows 设置鼠标滚轮灵敏度的方式) 鼠标滚轮灵敏度会反应到 WheelEvent 滚轮事件对象的 deltaY 上,灵敏度越高,每次滚动的 deltaY 就越大。...这个函数的返回值 0 到 2 之间,且为对数关系,即 x 越大,y 的值越平缓。 顺带一提,mac 触控板不是常规输入设备,所以不在滚轮事件标准之内。

93810

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

但是呢,touch 事件并不是完美的,不管是我们自己封装的 tap 事件,还是 zepto 自带的 tap 事件移动端都有一个致命的缺陷,就是“点透”。 什么是“点透”呢?...这个时候,我们既想无延时,又不想触发点透效果,而且有的时候,我们希望我们的网页不仅可以移动端访问, PC 模式下也可以访问,但是 tap 事件只能在移动端使用,所以只能用 click 事件,但是 click...它可以桌面,移动设备和智能电视平台上工作。它一直大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。 iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。...你可以很容易的挂靠大量的自定义事件(onBeforeScrollStart, * 开箱即用的多平台支持。从很老的安卓设备到最新的iPhone,从Chrome浏览器到IE浏览器。...,一句话: var myScroll = new IScroll(".wrapper"); 3、如果想实现像滚轮,显示滚动条等效果,可以初始化的时候,将这些需求作为对象,填入第二个参数中,比如,增加滚轮上下滚动操作和显示滚动条的效果

3.2K20

这 5 个前端组件库,可以让你放弃 jQuery UI

与其它框架不同的是,这些小部件仅使用JS,并且是从头开始构建的,根本不需要jQuery。即使移动设备上查看,组件也是快速,平稳并且稳定的。 说到移动设备,这也是Kendo UI擅长的领域之一。...这些组件的建立考虑到了移动设备,根据组件被设置的位置,提供了响应式的和自适应的布局。根据是否移动设备上显示,大多数小部件都会进行相应的调整和更改,这是一个很好的功能。...有趣的一点是,Wijmo 5构建在更现代化的标准之上,因此IE8上不起作用,此时就需要Wijmo的旧版本。Wijmo 3是基于jQuery,所以它支持直到IE6上使用。...虽然这个框架与jQuery UI共享一些组件,但Webix扩展了jQuery UI并提供了一些不同于jQuery UI中常用的组件。 Webix文档具有很好的帮助作用。...所有的控件显示左侧,右侧显示相关信息。每个控件都附带一个示例截图、示例代码,然后是所有的属性、方法和事件主演示页,可以快速查看Demo和每一个控件。

5.2K20

Python解放双手

而今天要讲的 pynput 则不同,它操作非常简单,而且里面包含的内容也更贴切输入设备,其中非常重要的两个模块就是 mouse 和 keyboard,分别提供了控制鼠标和键盘的类,下面我们就来看看一些具体操作...2.3、移动鼠标 移动鼠标调用的是 move 函数: from pynput import mouse # 创建鼠标 m = mouse.Controller() # 将鼠标移动到左上角 m.move(...另外一般鼠标上都会有三个控制按钮,左键、右键和滚轮,下面我们看看如何操作它们。...() # 滚动鼠标,第一个参数为 y 滚动的数值,第二个参数为 x 滚动的数值 m.scroll(0, -10) 2.7、监听鼠标事件 鼠标中的事件有三个,点击事件移动事件、滚动事件,我们看看如何监听鼠标事件...当我们触发某个事件时,监听者就会执行关联好的方法。 三、控制键盘 pynput 中提供了 keyboard 模块,该模块中提供了与 mouse 模块类似的一些类,这些类可以用于控制键盘。

1.1K30

UWP 入门教程2——如何实现自适应用户界面

通用输入处理 可使用通用控件创建通用Windows App来管理控制不同的输入模式,如鼠标,键盘,触摸笔,控制器等。...PointerPoint:统一了触摸,鼠标,笔数据。具有一致的接口和事件。 PointerDevice:是设备API,可支持查询设备支持的输入能力。...用户体验 通用Windows App 可利用所有设备特征来呈现App.App可充分利用桌面设备的处理能力,平板电脑的自然交互方式,以及智能手机的便捷性和移动性等。...使用导航设计指南来设计工作流程,使得App可兼容移动设备,较小的屏幕或较大的屏幕设备。 考虑特殊情况,较小的移动设备屏幕失效,也可能有一些功能区固定式台式机上不起作用,而需移动设备上才能运行。...考虑如何兼容多种输入形式 通过Dashboard提交通用 Windows 应用 利用新的通用的 Windows 开发人员中心仪表板,可以同一位置管理和提交所有面向 Windows 设备的应用。

3.1K50

jimojianghu

以前,如果要禁止移动设备的触摸屏上,手指缩小放大的功能,都会想到使用viewport 来处理。...触控板 要禁止触控板的缩放行为,需要处理鼠标滚轮事件:wheel 。 因为笔记本触摸板双指滑动,将响应该事件,如果对该事件阻止默认行为,就能解决缩放问题了。...笔记本触摸板双指滑动,将响应滚轮事件,因此可以监听该事件,禁止触摸板手指缩放界面。 但需要注意滚轮默认事件,如会导致子元素滚动失效,这时候就要在子元素上阻止相同事件冒泡。...添加 passive 参数为true后,touchmove 事件不会阻塞页面的滚动(同样适用于鼠标滚轮事件)。...由于目标被视为被动,因此无法在被动事件侦听器中阻止默认行为。 可能的发生情景:移动端使用touch事件后,垂直平移时的报错。

3.7K00

【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

+ 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ---- 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置 JFrame 窗口自动关闭...| 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 ; 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器...MouseWheelListener ) 博客中 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动时 , 拖动的效果也随之缩放, 如 缩小画布后 , 移动鼠标 , 移动距离对应的缩放效果也随之缩小...; 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布中绘制的背景图像 ( 鼠标滚轮事件监听器 MouseWheelListener | Canvas 中绘制图像并设置图像大小...// 统计本次鼠标移动的相对值 int dx = e.getX() - startX; int dy = e.getY() - startY

1.8K20

【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener )

文章目录 一、使用鼠标滚轮放大缩小 Canvas 画布 - 要点分析 1、鼠标滚轮事件 2、核心代码示例 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放示例 1、代码示例 2、效果展示 一、使用鼠标滚轮放大缩小...Canvas 画布 - 要点分析 ---- 1、鼠标滚轮事件 设置一个缩放比例 scale , 默认为 1.0 ; private double scale = 1.0; // 缩放比例,默认为...1.0 设置鼠标滚轮监听 , Canvas 组件中 , 调用 addMouseWheelListener 函数 , 添加 鼠标滚轮监听器 MouseWheelListener , 实现该监听器中的...+ 鼠标滚轮缩放示例 ---- 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置 JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移...(MouseEvent e) { // 统计本次鼠标移动的相对值 int dx = e.getX() - startX;

2.2K30

原生 JS 手写一个优雅的图片预览功能,带你吃透背后原理

例如鼠标移动事件对应 mousemove,移动端因为没有鼠标则对应 touchmove,而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。...最终效果如下:图片图片缩放(PC)PC实现图片缩放相对是比较简单的,我们利用滚轮事件监听并改变 scale 值即可。...移动查看由于缩放导致图像发生变化,我们自然地想到要靠移动来观察图片,此时体现在PC端的是按住鼠标拖拽,移动端则是手指点击滑动,而两者各自的事件监听显然并不共通,如以移动事件为例,PC端对应的是 mousemove...指针 是输入设备的硬件层抽象(比如鼠标,触摸笔,或触摸屏上的一个触摸点),它能指向一个具体表面(如屏幕)上的一个(或一组)坐标,可以表示包括接触点的位置,引发事件设备类型,接触表面受到的压力等。...虽然浏览器滚动对应的其实是 scroll 事件,但我们PC上滚动通常都是用利用滚轮(笔记本触控板也被视作滚轮),所以滚轮事件中阻止系统默认事件也就阻止了滚动,但不是完全阻止,因为滚动条没隐藏的话还是可以拖动来滚动页面的

2.4K81

软件测试|web自动化测试神器playwright教程(二十五)

图片前言鼠标为我们使用电脑提供了很多方便,我们看到的东西就可以将鼠标移动过去进行点击就可以打开或者访问内容,当页面内容过长时,我们也可以使用鼠标滚轮来实现对整个页面内容的查看,其实playwright也有鼠标操作的方法...鼠标操作Mouse 鼠标操作是基于page对象去调用,常用的鼠标操作有单击,双击,滚轮,按住,移动,释放。page.mouse 使用Mouse 类相对于视口左上角的主框架 CSS 像素中运行。...left", "middle", "right", 默认参数是leftclick_count 是点击次数语法示例:mouse.down()mouse.down(**kwargs)mouse.move 移动调度一个鼠标移动事件..."""语法如下:mouse.move(x, y)mouse.move(x, y, **kwargs)wheel 滚轮调度一个wheel事件。...(滚轮事件如果不处理可能会导致滚动,该方法不会等待滚动结束才返回。)

22020
领券