如何在网页中同时处理水平和垂直滚动答案

【问题标题】：How to handle horizontal and vertical scrolling at the same time within a webpage如何在网页中同时处理水平和垂直滚动
【发布时间】：2022-12-05 01:37:46
【问题描述】：

我目前遇到了一些涉及（平滑）滚动和同时尝试“更新”导航栏的问题。

目前我有一个很大的网页，在不同的标题下有很多内容。这些标题显示在跨越页面整个视图宽度的导航栏中，这些元素中的每一个都是 href 以平滑地滚动到标题的当前位置。

用户当前正在查看的标题在导航栏中突出显示。不过，我还想将此标题滚动到导航栏的前面或中间，以便轻松浏览页面。

使用以下代码： nav_bar.scrollBy(scrollAmount-125,0);

在我将 html {scroll-behavior: smooth;} 引入 CSS 之前，所有这些都工作得很好。一旦我调用.scrollBy()，平滑滚动就会中断并停止，然后才能完成滚动到 href 引用的元素。

是否有解决此问题的解决方案，我试图让.scrollBy() 在滚动完成后运行，但未能使其完全发挥作用。问题出在 html {scroll-behavior: smooth;} 上，因为删除此属性会提供所需的功能结果，但没有我想要的用户体验。

【问题讨论】：

我已经做了这种东西，我没有这个问题......你到底做了什么？
@MisterJojo 我在window.addEventListener("scroll", function() {} 内打电话给nav_bar.scrollBy(scrollAmount-500,0);

标签： javascript css scroll navigationbar vertical-scrolling

【解决方案1】：

你能试试吗？

<style>
    
    html {
        scroll-behavior: auto;
    }
</style>

<script>
 
    let navBar = document.getElementById("nav-bar");

    navBar.scrollBy(scrollAmount - 125, 0);
</script>

【讨论】：