我正在开发在线餐厅菜单。它有一个固定在顶部的水平导航栏。导航栏上的链接水平滚动,内容垂直滚动。这些链接指向同一页面上的#sections。我设法使链接在相应的内容部分滚动时突出显示。当用户滚动主要内容时,我还设法让菜单项自己滚动到屏幕中央。但这就是问题所在。当用户单击菜单链接时,最后一个功能会导致滚动失败。好像这个函数打断了点击触发的滚动,所以页面只滚动了10px就停止了。如果我删除菜单项的自动居中功能,单击将再次起作用。我试图通过将 onclick 函数附加到菜单链接来强制页面滚动,但它仍然不起作用。以下是解释的当前代码:
HTML:
<div id="menu" class="scroll">
<a class="menu_item" href="#sec_1">Link 1</a>
<a class="menu_item" href="#sec_2">Link 2</a>
<a class="menu_item" href="#sec_3">Link 3</a>
</div>
<section id="sec_1">
<div class="content">Some content</div>
</section>
<section id="sec_2">
<div class="content">Some content</div>
</section>
<section id="sec_3">
<div class="content">Some content</div>
</section>
CSS:
.scroll {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
scroll-behavior:smooth;
}
.scroll::-webkit-scrollbar { display: none; }
div#menu{
position: fixed;
top:0px;
width: 100%;
height:50px;
z-index: 999;
text-align: center;
}
a.menu_item{
display: inline-block;
vertical-align: middle;
text-align: center;
height: 50px;
background-color: #fff;
color: #000;
}
a.menu_item.active{ background-color: #000; color: #fff; }
section{ display: block; }
JavaScript:
// Get all sections that have an ID defined
const sections = document.querySelectorAll("section[id]");
// Add an event listener listening for scroll
window.addEventListener("scroll", navHighlighter);
function navHighlighter() {
// Get current scroll position
let scrollY = window.pageYOffset;
// Now we loop through sections to get height, top and ID values for each
sections.forEach(current => {
const sectionHeight = current.offsetHeight;
const sectionTop = (current.getBoundingClientRect().top + window.pageYOffset) - 70;
sectionId = current.getAttribute("id");
/*
- If our current scroll position enters the space where current section on screen is, add .active class to corresponding navigation link, else remove it
- To know which link needs an active class, we use sectionId variable we are getting while looping through sections as an selector
*/
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
theone = document.querySelector('a.menu_item[href="#' + sectionId + '"]');
theone.classList.add('active');
}
else {
document.querySelector('a.menu_item[href="#' + sectionId + '"]').classList.remove('active');
}
});
navScroll(theone); //this is the line that breaks the scroll started by clicks.
}
//brings the menu link to the visible area when user scroll thru content
//also tried using scrollIntoView(), got same result
function navScroll(item){
const menu = document.getElementById("menu");
const menu_w = menu.offsetWidth;
const item_w = item.offsetWidth;
const item_x = item.offsetLeft;
menu.scrollLeft = item_x - (menu_w / 2) + (item_w / 2);
}
//tried to use this as onclick function in menu links, but still won't work
function forceScroll(sectionID){
const section = document.getElementById(sectionID);
window.scrollTo(0,section.offsetTop);
}
所以基本上,如果我不使用 navScroll() 函数,一切正常。 .active 类将在内容滚动时相应地应用于菜单项,无论是用户滚动还是通过单击菜单中的链接,这都会使内容滚动到相应的部分。 但是当我添加 navScroll 函数,使菜单项滚动到视图中时,只有当用户直接滚动内容时,事情才会起作用。单击链接时,滚动很快被打断,什么也没有发生。
如果您只保留 Javascript,我将不胜感激,但如果它成为解决此问题的唯一方法,我会接受 jQuery。