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

Question

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

 // 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>