在滚动时移动 DomElements 时进入滚动循环

Question

我正在构建一个虚拟网格，它将根据需要将内容放入视口中，尤其是在用户滚动时。

我已经能够使用 React 实现这种行为，但我似乎在使用 svelte 时遇到了麻烦。

    <script>
    let scroll;
    $: height = Math.floor(scroll/200)*200;
</script>

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


<div class="holder" style="height:{height}px"></div>
<div class="box"></div>



<style>
    :global(body) {
        height: 20000px;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    .holder {

    }
</style>

REPL

当我滚动时，底部 div 的高度增加以升高蓝色框，某些东西触发了进一步的滚动，然后触发了进一步的高度增加，从而触发了进一步的滚动。

所以基本上当你滚动一点时，滚动条会在 PC 上变得疯狂并向下滑动。

理想情况下，页面应根据用户输入正常滚动。

不确定这是 svelte 的问题，还是浏览器的某些默认行为。

编辑：更改代码和 repl 以更多地反映我的要求，这说明了为什么设置“位置：固定”css 不起作用。

Answer 1

删除 .holder 并改为使用 position: fixed 和 top: 8px。

<script>
    let scroll;
</script>

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

<div class="box" style="position:fixed;top:8px"></div>

<style>
    :global(body) {
        height: 20000px;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>

Answer 2

在您的代码中设置 .holder 的高度会更改滚动条。就这样一直循环下去直到见底

<script>
    let scroll;
    $: top = Math.floor(scroll/200)*200;
</script>

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

<div class="box" style="top:{top}px"></div>

<style>
    :global(body) {
        height: 20000px;
    }
    .box {
        position: absolute;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>

Answer 3

如果需要增加高度，可以按照代码进行。

<script>
    let scroll;
    $: height = Math.floor((scroll - 1)/200)*200;
</script>

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


<div class="holder" style="height:{height}px"></div>
<div class="box"></div>



<style>
    :global(body) {
        height: 20000px;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    .holder {

    }
</style>

在滚动时移动 DomElements 时进入滚动循环

Getting into a scrolling loop when shifting DomElements on scroll

html

javascript

dom

dom-manipulation

svelte