如何在中央启动水平滚动菜单

Question

我正试图为一个项目安排一个水平滚动菜单，其中中间按钮从.rollmenudiv的中间开始。

我目前正在使用HTML和CSS，但对包括javascript在内的选项感到满意。

如有任何帮助，我们将不胜感激。

.container {
width: 414px ;
text-decoration: none;
}
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
width:100px;
border-weigth: 1px;
border-color:white;
border-style: solid;

}
div.scrollmenu a:hover {
background-color: #777;  
}

<div class="container">
<div class="scrollmenu">
<a href="">A</a>
<a href="">B</a>
<a href="">>!Middle!<</a>
<a href="">D</a>
<a href="">E</a>
</div>
</div>

Answer 1

您可以使用Javascript从中心启动滚动条。

window.addEventListener('load', () => {
let scrollElement = document.querySelector('.scrollmenu');
scrollElement.scrollLeft =  (scrollElement.scrollWidth - 
scrollElement.clientWidth ) / 2;
});