向下滚动时自动滚动水平导航栏 div

Question

当我根据导航栏类别位置向下到页面时，我想使水平导航栏自动滚动。就我而言，这是一个水疗中心。

 // navbar div which is aligned horizontally
 <div id="navbar" >
            <div class="scrollmenu menufonts" >
                    @foreach ($categories as $category)
                    <span><a href="#{{ $category->categories_id }}" class="catfontsize">{{ $category->categories_name }}</a></span>
                    @endforeach
                </ul>
              </div>
        </div>

 
div.scrollmenu {
  background-color: #fff;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
  }
   

我尝试通过 vanilla js scrollTo 属性和 windows eventlistener 自动滚动 div。但这在我的情况下不起作用。

      <script>
         const navbarContainer = document.getElementById('navbar');
        const navbarScrollWidth = navbarContainer.scrollWidth;

        window.addEventListener('load', () => {
        self.setInterval(() => {
            if (navbarContainer.scrollLeft !== navbarScrollWidth) {
            navbarContainer.scrollTo(navbarContainer.scrollLeft + 100, 0);
            }
        }, 15);
        });
      </script>

谁能建议我如何做到这一点？

Answer 1

我们可以在没有 Javascript 的情况下实现它

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-button {
  width: 2px;
  height: 2px;
}

div {
  box-sizing: border-box;
}

body {
  background: black;
}

.horizontal-scroll-wrapper {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 80px;
  max-height: 500px;
  margin: 0;
  background: white;
  overflow-y: auto;
  overflow-x: hidden;
  transform: rotate(-90deg) translateY(-80px);
  transform-origin: right top;
}
.horizontal-scroll-wrapper > div {
  display: block;
  padding: 5px;
  background: #faad1f;
  transform: rotate(90deg);
  transform-origin: right top;
}

.squares {
  padding: 60px 0 0 0;
}

.squares > div {
  width: 60px;
  height: 60px;
  margin: 10px;
}

<div class="horizontal-scroll-wrapper squares">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
  <div>Div 5</div>
  <div>Div 6</div>
  <div>Div 7</div>
  <div>Div 8</div>
</div>