如何在typescript中触发鼠标滚轮上的水平滚动 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JS事件篇

和scrollHeight获取元素整个滚动区域的宽和高元素.scrollLeft和scrollTop获取水平和垂直滚动条滚动滚动距离当满足scrollHeight - scrollTop == clientHeight...时，表明垂直滚动条滚动到底了阅读知情同意书的小案例 onmousemove事件和事件对象获取鼠标的坐标页面滚动条的归属者解决浏览器兼容性常使用以下写法 div跟随鼠标移动事件的冒泡和事件对象event...事件的传播拖拽案例---鼠标按下，移动，松开事件鼠标滚轮事件----onmousewheel----火狐不支持，由DOMMouseScroll替代判断滚轮上滚还是下滚----火狐不支持，由detail...; var ly=event.clientY-obj.offsetTop; //当触发鼠标按下事件之后，obj会跟随鼠标移动 //即触发鼠标在当前页面的移动事件...addEventListener("DOMMouseScroll",function(){ alert("鼠标滚轮"); },false) ---- 判断滚轮上滚还是下滚----火狐不支持，由

12.6K1 0

VCL 控件分类_验证控件的分类

OnMouseWheelDown：鼠标滚轮下滚触发 OnMouseUp：鼠标滚轮上滚触发 OnMouseWheel：鼠标滚轮滚动 OnResize：窗口或框架调整大小时。 OnPaint：窗口重画。...OnMouseDown：文本中鼠标每次按下 OnMouseUp：文本中鼠标每次抬起 OnMouseEnter：鼠标移进文本上方 OnMouseLeave：鼠标移出文本上方 OnEnter：鼠标光标进入文本...OnExit：鼠标光标离开文本 OnClick：鼠标点击文本 OnChange：每次键盘输入 Panel Visible：可视性 TMemo ScrollBars：滚动条设置 TabStop：Tab键...：还可显示图片；csOwnerDrawVariable：图片和字符串选项高度相同；csSimple：只能用户输入） Index：组合框中被选中的项的序号 OnChange(); 在下拉列表中添加或删除字符时会触发...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

4.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

前言其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。...实现思路在js中，onmousewheel是鼠标滑轮滚动事件，可以通过这个事件触发来改变图片的大小，实现图片放大缩小功能。但是我们这里是vue所以使用的是：mousewheel。...,显而易见动动鼠标滚轮就能触发事件,但是用光标拖拽滚动条就不能触发事件。...值的符号与车轮三角洲属性值。有火狐鼠标滚轮兼容问题。onmousewheelonmousewheel事件：会在鼠标滚轮滚动的时候被触发，对鼠标滚轮是否滚动进行判断，但是火狐浏览器不支持这个属性。...event.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。

3.7K2 0

H5C3第四节

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。...(了解) /* 监听鼠标滚轮事件 */ window.addEventListener("mousewheel", function( e ) { // e.wheelDelta 鼠标滚动的量..., 大于0向上滚, 小于0向下滚 if (e.wheelDelta > 0) { console.log("往上滚动"); } else { console.log..., index) 滚动到某一个section,当滚动结束后，会触发一次这个回调函数，anchorLink是锚链接的名称，index从1开始计算 onLeave(index,nextIndex,diretion...) 页面滚动到某一个幻灯片的时候会触发这个回调函数 afterSlideLeave(anchor,index,slideIndex, diretion,nextSlideIndex) 当离开某一个幻灯片的时候会触发一次这个回调函数

5.3K3 0

Fabric.js 居中元素 🎗️

添加一个矩形，之后要居中的对象就是它了。添加鼠标滚轮滚动时缩放画布（方便演示基于视窗和基于画布的区别）。添加鼠标拖拽画布平移位置（方便演示基于视窗和基于画布的区别）。...y: opt.e.offsetY }, zoom ) }) /* 拖拽画布 */ canvas.on('mouse:down', opt => { // 鼠标按下时触发..., opt => { // 鼠标移动时触发 if (canvas.isDragging) { let evt = opt.e let vpt = canvas.viewportTransform...canvas.lastPosX = evt.clientX canvas.lastPosY = evt.clientY } }) canvas.on('mouse:up', opt => { // 鼠标松开时触发...() } 复制代码上面我写了2中方法，方法1是用画布操作指定的对象；方法2是元素自己根据视窗来调整自己的位置。

3.7K2 0

JavaScript基础

，则返回body offsetLeftoffsetTop 当前元素和定位父元素之间的偏移量offsetLeft水平偏移量 offsetTop垂直偏移量 scrollHeightscrollWidth 获取元素滚动区域的高度和宽度...scrollTopscrollLeft 获取元素垂直和水平滚动条滚动的距离 scrollWidth -scrollLeft = clientWidth 水平滚动 scrollHeight -scrollTop...event中的target表示的触发事件的对象事件的绑定：addEventListener()通过这个方法也可以为元素绑定响应函数参数：事件的字符串，不要on 回调函数，当事件触发时该函数会被调用...，可以将addEventListener()的第三个参数设置为true一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false 鼠标单击事件 btn.onclick = function.../* * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发， * 但是火狐不支持该属性

2K2 0

简易Qt图片查看器

，可以方便的查看同目录下的其它图片，先来看下最终的效果：通过点击下方的图片文件夹图标，可以弹出系统文件选择窗口，可以选定任意目录下的图片选择图片后，图片显示主窗口即可居中显示图片通过滚轮上下滑动...，可以放大和缩小图片鼠标左键按下再移动，可以移动图片下方两侧的切换按钮，可以切换上一张、下一张图片 1 总体结构整个Qt图片查看器项目的代码结构如下：主代码中是图片查看器相关的代码，包括： src...：图片查看器主代码 picview.pro：Qt工程文件 images：存放各个按钮图标的资源文件 build中是编译的中间文件和编译结果存储的目录下面分类介绍了程序的主要代码实现。...下方的3个按钮再通过水平布局实现。采用自动布局管理，可随窗口大小自动调整显示。...滚动的移动，使用的wheelEvent来获取滚轮事件，当滚轮向前滑动时，增大缩放比例，当滚轮向后滑动时，减小缩放比例，然后调用update函数触发图像重绘。

2.3K1 0

BetterScroll源码阅读顺便学习TypeScript

既然目前我的痛点是看源码看不懂，那不如就在看源码的过程中遇到不懂的TypeScript语法再去详细了解，这样可能比单纯看文档更有效，接下来我将在阅读BetterScroll源码的同时恶补TypeScript...BetterScroll是一个针对移动端的滚动库，使用纯JavaScript，2.0版本使用TypeScript进行了重构，通过插件化将功能进行了分离，核心只保留基本的滚动功能。...// 如果本次检测到你是进行水平滚动，那么水平方向上会进行锁定，如果你这个配置设置的也是horizontal，这个方法会返回true，就相当于这次不进行模拟滚动而直接使用原生滚动，如果你传的是...，再根据一定算法来计算动量数据也就是最终要滚动到的位置，然后滚过去。...，比如css样式，可能还会遇到特定机型的bug，代码如何组织也很重要，要尽量的复用，比如BetterScroll里两种动画方式就存在很多共同操作，那么就可以把这些提取到公共的父类里，又比如水平滚动和垂直滚动肯定也是大量代码都是一样的

6222 0

JavaScript（进阶）

水平偏移量 offsetTop垂直偏移量 scrollHeight,scrollWidth 获取元素滚动区域的高度和宽度 scrollTop,scrollLeft 获取元素垂直和水平滚动条滚动的距离...，会在滚轮滚动时触发，但是火狐不支持该属性在火狐中需要使用 DOMMouseScroll 来绑定滚动事件，注意该事件需要通过 addEventListener() 函数来绑定 element.onmousewheel...= function(event){ event = event || window.event; //event.wheelDelta 可以获取鼠标滚轮滚动的方向 //向上滚 120...向下滚 -120 //wheelDelta这个值我们不看大小，只看正负 //wheelDelta这个属性火狐中不支持 //在火狐中使用event.detail来获取滚动的方向 //向上滚...-3 向下滚 3 //判断鼠标滚轮滚动的方向 if(event.wheelDelta > 0 || event.detail < 0){ //向上滚 }else{ //向下滚

1.5K2 0

鸿蒙开发实战案例：Scroll容器嵌套多种组件事件处理案例

即通过在Scroll.onScrollFrameBegin()每帧开始滚动时触发，将Scroll返回的实际滚动量的offset，通过scrollBy(0, offset)方法，将Scroll的偏移量派发给...手势触发即鼠标滚轮和触摸板的双指滑动。...通过Scroll对子组件的偏移量派发，使用Scroll.onScrollFrameBegin()中返回的offset滑动量判断页面上划/下划，进而通过this.webviewController.scrollBy...Scroll(){ // ...}// TODO：知识点：通过调用Scroll.onScrollFrameBegin()，在每帧开始滚动时触发时将Scroll返回的实际滚动量的offset，通过scrollBy...接口，滚动偏移派发给web（水平方向滚动距离为0，竖直方向滚动距离为offset） return { offsetRemain: 0 } // 将Scroll剩余滚动偏移量返回0，scroll

972 0

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

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

1.1K3 0

OpenCV与MFC实战之图像处理样本采集小工具制作 c++MFC课程设计

鼠标点击图片显示区域功能 1、左击图片选中，以鼠标点击处为中心，宽W*高H的区域。 2、鼠标滚轮上滚扩大选中区域。 3、鼠标滚轮下滚缩小选中区域。...4、右击保存选中区域的图片在正样本或负样本的目录下，取决于当前选中正样本还是负样本。完成界面如图： ?...第一步：把MFC界面的那些控件都拖动好并且绑定好opencv图形框在MFC的初始化函数中添加我们的绑定代码： BOOL CpicroiDlg::OnInitDialog() { CDialogEx...第三步：鼠标控制图像的裁剪和选定这里我们要实现的是鼠标点击出现一个矩形框，然后用鼠标的滚轮去滚动，让矩形框围绕中心点改变大小，然后点击右键则保存图形 void onMouse(int event,...因为不想写的很详细，（别问为什么，问就是因为最近很懒！！！），所以我给出了项目源码的百度云在文章的开头

1.3K2 0

Threejs入门之二十二：Threejs中的屏幕坐标转标准设备坐标

screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量。 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量。...pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是 clientX + 水平滚动条滚动的距离。...clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)。 clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动的距离)。...offsetX：鼠标点击位置相对于触发事件对象的水平距离。 offsetY：鼠标点击位置相对于触发事件对象的垂直距离。...获取鼠标坐标事件我们可以通过点击事件回调函数中的event来获取鼠标相关的位置信息addEventListener('click',function(event){ // event对象有很多鼠标事件相关信息

2.3K1 0

js、jQuery 获取文档、窗口、元素的各种值

获取竖直滚动条到顶部的垂直高度 (即网页被卷上去的高度)(ie浏览器): document.documentElement.scrollTop; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度...; 滚动条中内容的高度：boxx.scrollHeight;//利用这个可以使滚动条一直在底部网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft...的宽度： $(document.body).width(); 获取竖直滚动条到顶部的垂直高度 (即网页被卷上去的高度) ：$(document).scrollTop(); 获取水平滚动条到左边的水平宽度...在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素，计算鼠标与其的偏移值，以找到元素的border的左上角的外交点作为相对点。...另外offsetY并不在乎触发事件的元素是否有定位属性，它总是相对于触发事件的元素来计算偏移值。

14.1K3 2

JS魔法堂：关于元素位置和鼠标位置的属性

触发鼠标事件的区域盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件。 2....鼠标事件对象MouseEvent下的属性 [a]. evt.pageX/Y ：以页面左上角为参考点，表示当前触发点离页面左上角的水平和垂直距离。注意：1....evt.offsetX/Y ：以触发点所在dom的左上角为参考点，表示当前触发点离触发点所在dom的左上角的水平和垂直距离。注意：1....evt.screenX/Y ：以屏幕左上角为参考点，表示当前触发点离屏幕左上角的水平和垂直距离。注意：所有浏览器均支持 [e]. ...HTMLElement.scrollLeft/Top ：元素水平、垂直滚动条切去的宽度或高度。

5.8K10 0

jquery mobile 移动web(6)

swipe 在1秒内水平移动30px屏幕像素上时触发。　　　　swipeleft 向左侧滑动　　　　swiperight 像右侧滑动。　　...2.方向改变事件　　　　orientationchange 事件函数当移动设备的方向发生改变触发，在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数，　　　　该参数有两种返回值：portrait...3.滚动事件，　　　　scrollstart 开始滚动时候触发该事件。　　　　scrollend 滚动结束时触发该事件。　　...地址的协议，如 http https 　　　　　　属性：search 说明：返回地址中“？”...属性：password 说明：返回请求URL 中的密码如ftp 协议密码。　　　　　　属性： username 说明：返回请求URL中的用户名，如ftp 协议的用户名。

1.3K10 0

现代浏览器内部机制（四）：换个角度看事件

作为这个系列的最后一篇文章。在之前的文章中，我们了解了现在浏览器的多进程架构、导航以及渲染进程和合成器。在这篇文章中，我们将了解到合成器是如何在用户输入时流畅的处理交互的。...鼠标滚轮的滚动是一种输入事件，触摸或者鼠标滑过也是一种输入事件。...假设此时页面上有个容器，你只想让它进行水平滚动。...在你的鼠标事件监听函数中使用 passive:true 意味着页面的滚动可以按照往常纵享丝滑般地去处理，你会为了限制滚动的方向调用 preventDefault ，但在这之前竖直的滚动就可能已经发生了。...中延缓了事件的触发时机。

1K2 0

【愚公系列】《AIGC辅助软件开发》034-AI辅助开发跑酷游戏：代码实现

然而，随着游戏复杂度的增加，开发者常常面临挑战：如何编写高效、可维护的代码，如何快速响应玩家的反馈，以及如何在不同平台上保持游戏的流畅性。...如果需要实现水平滚动，只需调整脚本中的 `y` 坐标为 `x` 坐标即可。这个基本实现可以根据需求进一步优化和扩展，比如添加更多的背景图层，实现不同的滚动速度等。...用装饰器和 TypeScript 实现。在 TypeScript 中，使用装饰器来实现背景无限滚动的逻辑可以增强代码的结构化和可复用性。...**添加水平滚动**：如果你想要实现水平滚动，只需调整 `y` 坐标的滚动逻辑为 `x` 坐标。 3....如果背景图在左右或上下两侧衔接部分存在明显断层，滚动时就会看起来不连续。你可以使用图像编辑工具（如 Photoshop 或 GIMP）对背景图进行编辑，使它们在边缘无缝衔接。

1131 0

JS中的touch事件与canvas绘图

当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. Touch.pageY 触点相对于HTML文档上边沿的的Y坐标. 当存在垂直滚动的偏移时, 这个值包含了垂直滚动的偏移....MouseEvent属性属性/方法描述 clientX 触发鼠标事件时，返回鼠标指针相对于当前窗口的水平坐标 clientY 触发鼠标事件时，返回鼠标指针相对于当前窗口的垂直坐标 pageX 触发鼠标事件时...，返回鼠标指针相对于文档的水平坐标 pageY 触发鼠标事件时，返回鼠标指针相对于文档的垂直坐标 screenX 触发事件时，返回鼠标指针相对于屏幕的水平坐标 screenY 触发事件时，返回鼠标指针相对于屏幕的垂直坐标...offsetX 返回鼠标指针相对于目标元素边缘位置的水平坐标 offsetY 返回鼠标指针相对于目标元素边缘位置的垂直坐标 movementX 返回鼠标指针相对于上一个mousemove事件位置的水平坐标...movementY 返回鼠标指针相对于上一个mousemove事件位置的垂直坐标 target 返回与触发鼠标事件的元素相关的元素 which 返回触发鼠标事件时按下的鼠标按钮 altKey 返回触发鼠标事件时是否按下

7.6K4 1

LogicFlow更多配置选项

LogicFlow支持前端研发自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。...Vue3中的开发习惯，建议直接访问 LogicFlow 将获取完整的入门指南。...editConfigModelApi）：属性名默认值说明 isSilentMode false 是否为静默模式 stopZoomGraph false 禁止缩放画布 stopScrollGraph false 禁止鼠标滚动移动画布...stopMoveGraph false 禁止拖动画布如下启用了只读的静默模式、禁止缩放、禁止鼠标滚动移动画布、禁止拖动画布： lf.value = new LogicFlow({ container...container.value, isSilentMode: true, // 静默模式 stopZoomGraph: true, // 禁止缩放 stopScrollGraph: true, // 禁止鼠标滚动移动画布

1.8K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭