在Svelte中捕获元素上的滚动而不是窗口

Question

当用户在元素上方发起向下垂直滚动事件时，如何才能使自动滚动到元素的顶部?我想这样做，以便在页面顶部的滚动动作启动平滑滑动，并捕捉到下一个重要元素的UI/UX目的。我用的是Svelte

<script>
import Card from './Card.svelte';

const cards = ["card1", "card2", "card3", "card4"]
let y = 0;
let lastY = 0;
let theater;
let upperContainer;
const scrollToTheater = (y) => {
let dy = lastY - y;
lastY = y;
if (dy < -10) {
document.body.parentNode.scrollTo({
top: theater.offsetTop,
left: 0,
behavior: 'smooth'
})
}
}
$: scrollToTheater(y);
</script>
<svelte:window bind:scrollY={y} />
<main>
<header>
<h1>Hello World!</h1>
</header>
<div id="upper-container" bind:this="{upperContainer}">
<h2>Capture scroll over this area only</h2>
</div>
<div class="theater" bind:this="{theater}">
{#each cards as card}
<Card {card} />
{/each}
</div>
<footer>
Footer
</footer>
</main>
<style>
header {
width: 100%;
height: 40px;
padding:10px 20px 0 0;
}
#upper-container {
width: 100%;
height: 50vw;
margin: 30px 0;
background-color: rebeccapurple;
}

.theater {
background-color: black;
overflow: hidden;
}
</style>

这是一个REPL。在REPL中，您可以看到，虽然在紫色div上滚动时效果有效，但它会干扰从下面区域滚动。

我已经尝试用其他方式编写滚动事件侦听器，通过删除:

<svelte:window bind:scrollY={y} />

和添加:

<div id="upper-container" bind:this="{upperContainer}" on:scroll={() => {alert("scrolled")}}>

或:

onMount(() => {
const upper_container = document.getElementById("upper-container");
upper_container.addEventListener("scroll", () => alert("scroll"))
});

没有结果(参见REPL中注释掉的块)。如果我替换"scroll"与"click"我还尝试使用getBoundingClientRect().bottom来测试光标相对于元素的位置，但是当我将upperContainer.getBoundingClientRect().bottom放在scrollToTheater函数块中时，upperContainer是undefined。

Answer 1

滚动事件只会在滚动发生时触发。在你的例子中，你没有足够的内容在框内，你正在寻找滚动来实现。

这是您的REPL，使用onMount技术将内容添加到框中并绑定到元素。

这里是REPL与on:scroll事件处理程序的容器不需要绑定，两者都工作良好。

然而，如果你试图跟踪的是当鼠标滚轮在容器上滚动时，即使容器内没有足够的内容来触发滚动，那么你需要使用on:mousewheel处理程序，而不是像这个版本的REPL所示，你可能想也可能不想在这样做时使用preventDefault，它绝对不考虑移动用户，但这也有效。