@Scoll和@Wheel的区别

已于 2023-03-18 16:45:25 修改
阅读量803 收藏
点赞数
文章标签： vue.js
于 2023-03-18 16:41:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44712874/article/details/129639140
版权

1、@scroll=“demo”：表示只要滚动条在滚动就会触发demo事件，无论是通过键盘上下左右方向键还是鼠标滚轮滚动的方式，都会触发demo事件；当滚动条不滚动时，则不会触发demo事件

2、@wheel=“demo”：表示只能通过滚动鼠标滚轮才能触发demo事件，即使滚动条超出范围不再滚动，只要还在滚动鼠标滚轮，demo事件仍在触发

Vue事件修饰符
王二红
07-27 3238
.stop(阻止冒泡) 阻止事件向上级DOM元素传递(防止冒泡)，可理解为从内到外传递。 HTML： <div id="app" @click="divClick"> <button @click="btnClick">{{ name }}</button> </div> Vue： var vm = new Vue({ el:'#app...
vue吸顶导航
qq_42312396的博客
03-27 1959
自己边查资料边做，不过最后用的还是原生dom的方法，其实用$refs就可以了，但是反正滚动监听还是用的原生，所以也没关系了。 html导航 <div class="contain"> <div class="nav-bar-wrap"> <ul class="banner"> <li v-for="value in banner_list" :key="value" @
VUE中@wheel和@scroll失败的原因
zhangbaisui的博客
11-08 1630
@wheel和@scroll监听滚动事件条失败的原因
vue中 @scroll的使用
weixin_35756637的博客
01-03 4111
@scroll 是 Vue 中的一个修饰符，可以用来监听元素的滚动事件。 使用方法： 在元素上绑定一个 @scroll 修饰符，并绑定一个事件处理函数，如： <template> <div class="container" @scroll="handleScroll"> </div> </template> <script&gt...
鼠标滚轮冒泡事件@wheel.stop
最新发布
yuzheh521的博客
02-07 480
我有一个页面,是在画布上的组件,但是组件中有一个table,table中数据多了,就会出现滚动条,正常情况下,滚动条用鼠标滚轮就可以滑动,但是这个table是在画布上,滚动滚轮会让画布缩放。在table外层的div上加上 @wheel.stop,就生效了。
vue中 @scroll
m0_63026408的博客
07-20 1575
是 Vue 中的一个修饰符，可以用来监听元素的滚动事件。
vue-wheel
03-05
eternity-ui-Vue UI组件库 介绍 使用Vue.js的Web端UI组件库（持续更新中） 开始使用 CSS样式 使用本框架前请在CSS中开启border-box *,*::before,*::after{box-sizing: border-box;} IE 8及以上浏览器都支持此样式 安装eternity-ui npm i eternity-ui Ñeternity-ui import {Button,ButtonGroup,Icon} from 'eternity-ui' import 'eternity-ui/dist/index.css' export default { name: 'app', components: { HelloWorld, 'et-button': Button, ... } } IE
JavaScript实现 无滚动条(隐藏滚动条)的滚动功能 兼容常见浏览器
ChugRabbit的博客
08-20 1031
JavaScript实现 无滚动条(隐藏滚动条)的滚动功能 兼容常见浏览器 先上DJ 不对 先上代码 js代码 function scroll(element,stap=3){ let userAgentInfo = navigator.userAgent, Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"], flag = true; for (var v = 0; v < Agents.l
QStyle Class
weixin_43446462的博客
10-23 454
Header：#include < QStyle > qmake：QT += widgets Inherits：QObject Inherited By：QCommonStyle
Vue框架学习笔记——事件scroll和wheel的区别
Aer_7z的博客
11-26 2367
描述scroll滚动条事件和wheel鼠标滚轮事件，以及二者的不同
Vue 鼠标滚动事件
m0_63172990的博客
02-06 2887
window.addEventListener('wheel',this.closeSelect) }, deactivated() { // 页面关闭（路由跳转）时清除定时器 clearInterval(this.queueTableDataTimer);// 页面跳转清除 滚动事件 window.removeEventListener('wheel', this.closeSelect) },
Vue 学习总结笔记 (二)
探索技术与实践的旅程，分享编程经验与工具使用心得，助力开发者提升技能。
01-20 2655
1. Vue的 事件修饰符 1.1 Vue 的六种事件修饰符 1.2 Vue的 prevent事件修饰符 1.3 Vue的 stop事件修饰符 1.4 Vue的 once事件修饰符 1.5 Vue的 capture事件修饰符 1.6 Vue的 self事件修饰符 1.7 Vue的 passive 事件修饰符 2. js的事件对象 event 3. Vue 键盘事件 4. 差值语法中调用函数名的效果 5. Vue的 计算属性 6. Vue的 监视属性 6.1 监视属性的使用 6.2 深度监视 6.3 监视属性
scroll 和 wheel 事件的区别
Ranye的博客
08-21 406
只有 element 可以 scroll，才能在 element been scrolled 的时候，触发 scroll 事件。这是 mdn 上写的 wheel 和 scroll 事件的区别，说 wheel 未必触发 scroll 事件，这个其实也间接的说明这俩本身就不是一个东西。我觉得 list 是一个长的列表，比 container 要长，应该能滚动才是，不知道为啥滚动不了。鼠标的事件常用的有click，这个是点击，mousemove，位移，还有 wheel，就是滚轮了。后来请教了师父，他直接。
vue项目中监听鼠标滚轮事件
WHY_222的博客
11-02 4075
描述 通过鼠标向下滚动或者向上滚动做相应的事件 代码 <div class="container-box" @wheel="handleWheel"></div> //节流函数 throttle (fn, gapTime) { let _this = this return function () { let _nowTime...
vue @scroll监听滚动条事件，解决不生效问题
weixin_43205308的博客
04-23 3272
1、单纯加 @scroll并不生效 <Row @scroll="loadMore"> 2、在配置@scroll同时在mounted加上一下方法 mounted(){ window.addEventListener('scroll',this.loadMore,true) }, 3、loadMore方法可以自己定义 loadMore: function (e) { console.log(e) } 4、通过以上可以顺利监听滚动条监听事件
vue @scroll 监听滚动条事件
热门推荐
chen_sheng_le的博客
06-06 2万+
vue @scroll 监听滚动条事件 为啥要使用 @scroll 监听滚动条事件 没用在vue.js 开发前 我们监听滚动条事件都是在window挂监听事件 例如:window.onscroll = function , 不是说vue.js不能这样写, 只是这样写不好 这些必须在这个页面销毁时 清除这个事件 不然的话就会在全局监听,用原生 window监听可能是大家最熟悉的方法 .可vue.js 给我提供了@scroll 这个方法用来处理滚动条监听它不香吗??? 好了不多BB直接将上干货 使用@scrol
scroll-view中@scroll事件滚动未触发之一系列问题
weixin_58390720的博客
06-07 1161
问题：在页面上滑后，再想下滑至顶部时发现触发了下拉刷新，且页面不能向下滑动解决方法：使用scroll监听滑动位置，当到达顶部时下拉即触发刷新。
07-事件处理
Felix_49的博客
06-19 256
vue事件处理
vue为啥监听不了@scroll
m0_59157023的博客
07-02 654
事件冒泡：滚动事件可能被封装在某些组件内部，导致不会冒泡到父元素上。绑定scroll事件的div容器应该有overflow 可以滚动的。哈喽 大家好 我在vue中写了一个滚动scroll监听事件。然后滚动鼠标 发现进不来我的方法断点。正确绑定到了可滚动容器上。属性，使得元素不可滚动。事件绑定错误：确保你使用。组件内部没有正确地设置。
微信小程序开发scoll-view
10-14
微信小程序中的`scroll-view`组件是一个用于创建滚动视图的控件，它允许内容在指定方向上滚动。开发者可以设置`scroll-x`属性来控制水平滚动，而`scroll-y`属性则用于垂直滚动。下面是一些基本的使用方法： 1. **基础使用**： ```xml <view class="scroll-view" scroll-y="{{canScroll}}" bindscrolltolower="onBottom"> <!-- 内容 --> </view> ``` 2. **设置滚动范围**： 可以通过设置`scroll-top`、`scroll-bottom`、`scroll-left`和`scroll-right`属性限制滚动范围。 3. **监听事件**： `bindscroll`和`bindscrolltolower`分别会在滚动开始和滚动到底部时触发相应的回调函数。 4. **启用惯性滚动**： 使用`bounces`属性可以开启或关闭滚动条的弹性效果。 5. **调整滚动速度**： 可以通过`scroll-snap-type`属性自定义滚动分段，以及`scroll-deceleration`属性调节滚动速度。 ```xml <scroll-view bounces="{{true}}" deceleration="{{0.01}}" scroll-x="{{false}}" scroll-y="{{true}}"> <!-- ... --> </scroll-view> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭政伯

与付费斗争到底

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值