我正在尝试向 x-refs 添加滚动事件侦听器(我不想使用 @scroll.debounce 将它们添加到 DOM 中,因为我希望它尽可能可移植)。
Codepen 在这里:https://codepen.io/skttl/pen/vYXowBY?editors=1111
<div x-data="xOverflow()" x-init="init()" style="width:50%;border:1px solid red;position:relative;overflow:hidden;">
<div x-ref="wrapper" style="overflow-x:auto;">
<div x-ref="content" style="width:1000px;border:1px solid blue; height:500px;">
<div>wrapper.clientWidth: <span x-text="$refs.wrapper.clientWidth"></span></div>
<div>content.clientWidth: <span x-text="$refs.content.clientWidth"></span></div>
<div>overflow: <span x-text="overflow"></span>
</div>
</div>
<div x-show="overflow" style="position:absolute;top:0;left:90%;right:0;bottom:0;background:rgba(0,0,0,.15);"></div>
</div>
function xOverflow() {
return {
overflow:false,
// methods
setFromResize() {
this.overflow = this.$refs?.wrapper?.clientWidth < this.$refs?.content?.clientWidth
console.log(`resize: overflow is ${this.overflow}`);
},
setFromScroll(e) {
this.overflow = !(e.target.scrollLeft == this.$refs?.content?.clientWidth - this.$refs?.wrapper?.clientWidth);
console.log(`scroll: overflow is ${this.overflow}`);
},
init() {
window.addEventListener("resize", event => _.debounce(this.setFromResize(), 250));
this.$refs?.wrapper.addEventListener("scroll", event => _.debounce(this.setFromScroll(event)));
}
}
}
我试图检测 $refs.content 的 clientWidth 是否大于 $refs.wrapper。当窗口大小调整时,应该再次检测到这一点。
除此之外,我想显示一个覆盖层(如果内容溢出),当滚动到末尾时应该将其删除。
我可以通过在根元素上拍打 @resize.window.debounce ,在包装元素上拍打 @scroll.debounce 来做到这一点。但我希望这个组件是可移植的,只需添加 x-data、x-init 和 x-refs,而不用担心附加事件侦听器。
我尝试向事件侦听器添加 lodash 去抖,但每个事件都会调用这些函数,而不是去抖。检查 console.log 以获取证据。
任何人都可以帮我解决这个问题吗?
原来我是个白痴,我只需要稍微移动一下就可以了:)
来自
window.addEventListener("resize", event => _.debounce(this.setFromResize(), 250));
this.$refs?.wrapper.addEventListener("scroll", event => _.debounce(this.setFromScroll(event)));
到
window.addEventListener("resize", _.debounce(event => this.setFromResize(), 250));
this.$refs?.wrapper.addEventListener("scroll", _.debounce(event => this.setFromScroll(event)));
在 Alpine 3 中是否可以执行没有 lodash?