如何解决Scrollspy 溢出-x:滚动菜单
我正在使用 Scrollspy 做一些事情。但是我遇到了一个问题,找不到解决方案。当我滚动时,我希望它跟随我的导航栏滑块上的导航项。因为当有很多部分时,我看不到他在哪个部分。我该如何解决这个问题?我尝试了 bootstrap 的 scrollspy 组件,但它在那里不起作用,我想知道是否有人有更好的解决方案?提前致谢
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1" />
<title>VanillaJS ScrollSpy</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"
/>
<style>
html,body {
height: 100%;
}
.navbar-start {
width: 300px;
overflow-y: scroll;
display: flex;
margin-left: auto;
margin-right: auto;
border: 2px solid #fff;
}
.navbar-brand > .navbar-item {
font-size: 20px;
font-weight: bold;
}
.navbar-menu .navbar-item {
font-size: 14px;
transition: background-color 0.26s,color 0.26s;
}
.navbar-menu .navbar-item.active {
background-color: #222;
color: red;
}
.page {
height: 100%;
padding: 80px 0;
width: 100%;
}
.page:nth-child(odd) {
background-color: #ddd;
}
.page:nth-child(even) {
background-color: #fff;
}
</style>
</head>
<body>
<nav
class="navbar is-dark is-fixed-top"
role="navigation"
aria-label="main navigation"
>
<div class="container">
<div id="navbar" class="navbar-menu navbar-scroll">
<div class="navbar-start">
<a href="#section1" class="navbar-item active">Section-1</a>
<a href="#section2" class="navbar-item">Section-2</a>
<a href="#section3" class="navbar-item">Section-3</a>
<a href="#section4" class="navbar-item">Section-4</a>
<a href="#section5" class="navbar-item">Section-5</a>
<a href="#section6" class="navbar-item">Section-6</a>
<a href="#section7" class="navbar-item">Section-7</a>
<a href="#section8" class="navbar-item">Section-8</a>
<a href="#section9" class="navbar-item">Section-9</a>
<a href="#section10" class="navbar-item">Section-10</a>
<a href="#section11" class="navbar-item">Section-11</a>
<a href="#section12" class="navbar-item">Section-12</a>
</div>
</div>
</div>
</nav>
<section id="section1" class="page">
<div class="container">
<h2 class="title">Section 1</h2>
</div>
</section>
<section id="section2" class="page">
<div class="container">
<h2 class="title">Section 2</h2>
</div>
</section>
<section id="section3" class="page">
<div class="container">
<h2 class="title">Section 3</h2>
</div>
</section>
<section id="section4" class="page">
<div class="container">
<h2 class="title">Section 4</h2>
</div>
</section>
<section id="section5" class="page">
<div class="container">
<h2 class="title">Section 5</h2>
</div>
</section>
<section id="section6" class="page">
<div class="container">
<h2 class="title">Section 6</h2>
</div>
</section>
<section id="section7" class="page">
<div class="container">
<h2 class="title">Section 7</h2>
</div>
</section>
<section id="section8" class="page">
<div class="container">
<h2 class="title">Section 8</h2>
</div>
</section>
<section id="section9" class="page">
<div class="container">
<h2 class="title">Section 9</h2>
</div>
</section>
<section id="section10" class="page">
<div class="container">
<h2 class="title">Section 10</h2>
</div>
</section>
<section id="section11" class="page">
<div class="container">
<h2 class="title">Section 11</h2>
</div>
</section>
<section id="section12" class="page">
<div class="container">
<h2 class="title">Section 12</h2>
</div>
</section>
<script src="vanillajs-scrollspy.min.js"></script>
<script>
const navbar = document.querySelector("#navbar");
const scrollspy = new VanillaScrollspy(navbar);
scrollspy.init();
</script>
</body>
</html>
解决方法
由于 VanillaScrollspy 没有附加任何事件,我修改了它的核心 js 文件并在更新导航项的类时调用了一个函数。我创建了一个名为“update_nav_menu_position”的函数,它的工作原理是这样的
update_nav_menu_position = function(){
// using jquery here
var $active_nav_item = $("#navbar").find('a.active'),$scroll_elem = $(".navbar-start"),left_pos,right_limit,active_elem_left_pos,active_elem_right_pos,scroll_pos,new_scroll_pos;
if( ! $active_nav_item.length ) {
return false;
}
left_pos = $scroll_elem.offset().left;
right_limit = $scroll_elem.width() + left_pos;
active_elem_left_pos = $active_nav_item.offset().left;
active_elem_right_pos = $active_nav_item.width() + active_elem_left_pos;
scroll_pos = $scroll_elem.scrollLeft();
if( active_elem_left_pos > left_pos && active_elem_right_pos < (right_limit - 50) ) {
return true;
} else {
new_scroll_pos = (left_pos + right_limit) / 2;
new_scroll_pos = active_elem_left_pos - new_scroll_pos;
new_scroll_pos = scroll_pos + new_scroll_pos;
$scroll_elem.scrollLeft(new_scroll_pos);
}
}
我已经初始化了页面顶部的函数变量。
这是您文件的工作示例。 https://codepen.io/ympervej/pen/XWMvKqg
检查我调用函数的第 200 行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。