vue scroll事件失效
发表于|更新于
|浏览量:
那些听不见音乐的人认为那些跳舞的人疯了。——尼采。
这个坑,我遇到的时候,百度要么告诉我加高度,要么告诉我用document或者ref去获取节点
可我只想用@scroll事件,于是我在到处加@scroll,在组件上加@scroll.native,在组件里的div上加,在slot中加,然后又给它们挨个加高度,没一个好使,搞的我很头大
后面我突然发现,我给加的,好像并不是实际滚动的地方,那我明白了,首先我给引用组件放入slot中的div指定了样式:
1 | .allow-scroll { |
然后再给它绑定事件@scroll,此处如果该div下的元素高度超出了80vh,则会触发事件。。。这坑踩的,就离谱
相关推荐
2025-03-18
文本精准对齐
即使饱含泪水,我仍旧将它们擦干;即使不被信任,我仍旧相信。就是这样,也将是这样。——保罗·科埃略的《阿莱夫》 CSS 如何让文本随背景图等比例缩放?背景在响应式布局中,我们经常需要让文本标注准确地贴合背景图,并且在窗口缩放时,文本应 保持相对位置不变,同时等比例缩放。然而,传统的 position: absolute 方式往往会导致文本发生 偏移,影响对齐。 最佳实践:position + transform在 CSS 中,最简单且稳定的方法是结合: 1234position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); 这能确保文本始终居中,不随容器缩放而偏移。 原理解析 position: absolute 确定参考点 文本相对于 position: relative 的父元素 进行绝对定位。 left: 50%; top: 50% 让文本的左上角 位于背景图 50% 的位置。 transform: translate(-50%, -50%) 精准居中 向左移动自身宽度 50% (t...
2024-01-08
tianai-captcha
笑长命,哭生病。——佚名 分享一个验证码库 在线体验http://captcha.tianai.cloud 使用方式http://doc.captcha.tianai.cloud 源码地址https://gitee.com/dromara/tianai-captcha https://github.com/dromara/tianai-captcha tianai-captcha简称tac,是一款集成滑动类、点选类的一款行为验证码,以使用简单、安全性强、界面美观、接入方便而,是为集好看、功能多、安全性强的一款开源行为验证码工具。 今天tianai-captcha加入dromara,热烈欢迎
2022-05-18
CompositionEvent
业余生活要有意义,不要越轨。——华盛顿 分享一个输入法事件:CompositionEvent 这个事件只在用户间接输入文本(如使用输入法)时触发: 例如下面这个例子: 123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html><head> <title></title></head><body> <div class="control"> <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> ...
2021-09-13
css模糊
我们都希望自己过艺术的一生,但艺术是什么,却没有明确的定义。你过早地为人生设限,大多数时候是不成熟的表现。——灵遁者 对应的css代码为: 1filter: blur(1px); 这里可以更改blur值的大小 1filter: blur(2px);
2024-09-22
position-try
教育的胜利,可以压倒国民性。——爱默生 https://css-tricks.com/almanac/properties/p/position-try-fallbacks/ 今天分享一个position-try的css属性 它就像字面意思是说: 位置-尝试 代表着 它在页面移动时尽可能尝试调整位置 举个栗子: 1234567.target { position: absolute; position-anchor: --my-anchor; position-area: top; position-try-fallbacks: bottom;} 我写下代码: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273<style> /* 定义一个锚点元素 */ .anchor { an...
2022-04-15
js中eval
如果你来访我,我不在,请和我门外的花坐一会儿,它们很温暖,我注视他们很多很多日子了。——汪曾祺 今天发现这么一个函数eval eval能够将传入的字符串当做js代码执行 例如处理json(请不要这样使用,正确的做法应该是使用JSON.parse(data)): 12let data = '{"nane":"ruben","age":11}'eval("("+data+")") 1234567891011console.log(eval('2 + 2'));// expected output: 4console.log(eval(new String('2 + 2')));// expected output: 2 + 2console.log(eval('2 + 2') === eval('4'));// expected output: truecon...
