主页 / 问题

问题[scroll]

Martin Hope
webphp
Asked: 2022-07-23 12:43:39 +0000 UTC
  • 1

我不明白怎么回事，我观察到一个奇怪的效果。当用户接近页面底部时，我需要加载内容。
我有一个禁止或允许加载内容的状态，它在少于某个数量的时候被激活到底部。这是状态：

const [fetching, setFetching] = useState(true);
useEffect(() => {
    if(fetching) {
         // тут обновляю состояние которое добавляет новый контент
    }
}, [fetching])

还有滚动状态

useEffect(() => {
    document.addEventListener("scroll", scrollHandler)

    return () => document.removeEventListener("scroll", scrollHandler)

}, [])

好吧，scrollHandler 本身：

const scrollHandler = (e: any) => {
    if(e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 100 ) {
        setFetching(true)
    }
}

事实是，如果您设置setFetching(true)小于 100px 到页面末尾时，一切正常，但是使用此值，用户可以看到内容是如何加载的，但是您想隐藏这一时刻，为此您需要将值增加，例如，增加到 1000

const scrollHandler = (e: any) => {
    if(e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight) < 1000 ) {
        setFetching(true)
    }
}

而这里有趣的开始了，内容可以随时停止加载，我不明白这是怎么回事，或者是因为addEventListener和removeEventListener批量操作，还是其他一些原因。如何解决问题或以不同的方式实施？

scroll react.js
Martin Hope
George Marco
Asked: 2022-07-11 03:55:07 +0000 UTC
  • 0

大家好！我在控制台中收到永久更新，但出现错误。（代码中的示例）。是否可以在没有无休止的 requestAnimationFrame 调用的情况下实际使用它，或者是否有其他更简洁、更宽敞的优化解决方案，告诉我？谢谢！

在此处输入图像描述

const
    body = document.body,
    scrollWrap = document.getElementsByClassName("main")[0],
    height = scrollWrap.getBoundingClientRect().height - 1,
    speed = 0.1;

var offset = 0;

body.style.height = Math.floor(height) + "px";

function smoothScroll() {
    offset += (window.pageYOffset - offset) * speed;

    var scroll = "translateY(-" + offset + "px) translateZ(0)";
    scrollWrap.style.transform = scroll;

    callScroll = requestAnimationFrame(smoothScroll);
}

smoothScroll();
<body>
  <div class="main" style="display: flex; flex-direction: column; width: 100vw; height: 200vh">
    <span>Text</span>
    <div style="width: 10vw; height: 20vh; background-color: #000000"></div>
    <span>Text</span>
    <span>Text</span>
        <div style="width: 10vw; height: 20vh; background-color: #000000"></div>
    <span>Text</span>
  </div>
<body>

javascript scroll
Martin Hope
Kiral
Asked: 2020-09-23 03:26:16 +0000 UTC
  • 1

将鼠标悬停在 DIV 上时，如何使用鼠标滚轮实现水平滚动？

也许有一个特定的解决方案（现成的代码）？

scroll
Martin Hope
Tvolex
Asked: 2020-09-20 00:53:09 +0000 UTC
  • 2

你好，我对这样一个问题感兴趣，如何跟踪我滚动到一个块，然后到第二个块，或者如何跟踪我当前正在查看的第三个块？

http://gabegsell.com/anchors/ - 像这里一样，滚动 - 你会得到 .push('#anchors2') 等。...

如何在 Vue 中实现这一点？谢谢）

scroll