I have a webpage with multiple categories. Each category has multiple elements as children. On the top, I have a navigation with inline urls. Clicking a url in the navigation will make you jump to the related category.

我有一个有多个类别的网页。每个类别都有多个元素作为子元素。在顶部，我有一个带有内联URL的导航。点击导航中的一个URL，你会跳转到相关类别。

I am using JQuery animate to scroll smoothly to the category:

我正在使用JQuery Animate平稳地滚动到类别：

$('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top +1,
}, 300,'linear')

<nav>
    <a href="#category-a">Category A</a>
    <a href="#category-b">Category B</a>
    <a href="#category-c">Category C</a>
    <a href="#category-d">Category D</a>
</nav>

<div id="categories">
    <h2 id="category-a">Category A</h2>
    <div class="category">
        <div class="child">...</div>
        <div class="child">...</div>
        <div class="child">...</div>
        <div class="child">...</div>
    </div>
    
    <h2 id="category-b">Category B</h2>
    <div class="category"></div>
    
    <h2 id="category-c">Category C</h2>
    <div class="category"></div>

    <!-- ... -->
</div>

The elements of the first category are loaded immediately. The content of the other categories are loaded dynamically using AJAX to save time for the initial page load. When the bottom of the user's window is 100px above a category the category gets loaded so all the content is visible when the category is in the viewport. This all works fine.

第一个类别的元素将立即加载。其他类别的内容使用AJAX动态加载，以节省初始页面加载的时间。当用户窗口的底部在某个类别上方100px时，该类别会被加载，因此当该类别位于视区中时，所有内容都是可见的。这一切都运行得很好。

Especially when the user scrolls using his mouse. But there is a problem when the user jumps to a category by using the navigation.

尤其是当用户使用他的鼠标滚动时。但是，当用户使用导航跳转到某个类别时，就会出现问题。

When for example <a href="#category-d">Category D</a> is clicked in the navigation, the page scrolls to the top position of #category-d. But because the user's viewport also went over #category-b and #category-c those categories also get loaded dynamically resulting in the user landing on the wrong position on the page.

例如，当在导航中单击Category D时，页面滚动到#Category-d的顶部位置。但是，因为用户的视区也超过了#CATEGORY-B和#CATEGORY-C，所以这些类别也会被动态加载，导致用户在页面上定位到错误的位置。

Example of how it goes now:

现在如何进行的示例：

1. User clicks on #category-d in the navigation to go to.


2. The top position of that category is for example 500px. Note that it has this position because #category-b and #category-c are still empty.


3. Now all the preceding categories also get loaded (because the viewport jumped over all those categories to scroll to the selected category).


4. Those categories get loaded resulting in the new position of #category-b being e.g 2000px.


5. The browser stays on the scrollTop of 500px because that was the initial position of #category-d when the other categories were still empty.


6. The user sees #category-b instead of #category-d.

How would I fix this? I tried to use setTimeout before jumping to the category, but that is not ideal. I should have a kind of solution that when the user clicks on a category in the navigation, the browser's viewport should focus on that category so that when the top position of that category changes the browser automatically jumps to the new top position until the user scrolls manually.

我该怎么解决这件事？在跳到该类别之前，我尝试使用setTimeout，但这并不理想。我应该有一种解决方案，当用户点击导航中的一个类别时，浏览器的视区应该集中在该类别上，以便当该类别的顶部位置改变时，浏览器自动跳到新的顶部位置，直到用户手动滚动。

You can create a wheel event to handle wheel scrolling specifically, like

您可以创建一个车轮事件来专门处理滚轮滚动，如下所示

document.getElementById("myDIV").addEventListener("wheel", myFunction);

You can check at your wheel event where the scrolling happened and apply the loading when certain positions are reached. Using this kind of wheel event you can make sure that the wheel scrolling will continue to work properly.

您可以在滚轮事件中检查滚动发生的位置，并在到达某些位置时应用加载。使用这种滚轮事件，您可以确保滚轮滚动将继续正常工作。

The other thing you want is to avoid loading the content if you "jump" through it, that is, the user is scrolling without a wheel. For this purpose you will need to detect when the scroll has ended.

你想要的另一件事是避免在你“跳过”的情况下加载内容，也就是说，用户滚动时没有滚轮。为此，您需要检测滚动何时结束。

You can find here ingenious ways to detect when the scrolling has ended: How do I know when I've stopped scrolling?

你可以在这里找到巧妙的方法来检测滚动何时结束：我如何知道我何时停止滚动？

Basically, you repeatedly look whether the scroll is still happening and it's advisable in your case to always be aware of the last scroll state. When the scroll ends, you can detect on which content part the user is on and, if its loading was not issued yet, then you can initiate it.

基本上，您反复查看滚动是否仍在发生，在您的情况下，建议始终了解最后的滚动状态。当滚动结束时，您可以检测用户所在的内容部分，如果加载尚未发出，则可以启动它。