javascript - 使用上一个/下一个按钮在粘性元素之间滚动

Question

我正在尝试创建一些可以在某些 div 元素之间滚动的按钮。我知道这可以使用 scrollTop 来完成，但是元素是粘性的，所以上一个按钮不会将元素滚动到 View 之外。

这里有一个 JSfiddle 可以更好地理解我的意思:https://jsfiddle.net/1uek576m/1/

这是我已有的脚本:

(function() {
var scrollTo = function(element) {
    $('html,body').animate({
        scrollTop: element.offset().top
    }, 500);
}
$('#next').click(function(event) {
    event.preventDefault();
    var $current = $('main > .current');
    if ($current.index() != $('main > .background').length - 1) {
        $current.removeClass('current').next().addClass('current');
        scrollTo($current.next());
    }
});
$('#prev').click(function(event) {
    event.preventDefault();
    var $current = $('main > .current');
    if (!$current.index() == 0) {
        $current.removeClass('current').prev().addClass('current');
        scrollTo($current.prev());
    }
});
})();

有什么办法可以实现吗？

编辑:为澄清起见，我在 block 元素上使用 position: sticky 来实现滚动效果，如以下 youtube 视频所示:https://www.youtube.com/watch?v=yk57cgZLWRo

谢谢

Answer 1

你必须删除 position: sticky .因为那些不是粘性元素。该元素应该只是一个普通的 block 元素，它们是默认的。然后单击您将滚动到下一个或上一个元素。

要使内容垂直居中，您可以使用 Flexbox .无需定位 <h1>与绝对。

(function() {
    var scrollTo = function(element) {
        $('html,body').animate({
            scrollTop: element.offset().top
        }, 500);
    }
    $('#next').click(function(event) {
        event.preventDefault();
        var $current = $('main > .current');
        if ($current.index() != $('main > .background').length - 1) {
            $current.removeClass('current').next().addClass('current');
            scrollTo($current.next());
        }
    });
    $('#prev').click(function(event) {
        event.preventDefault();
        var $current = $('main > .current');
		if (!$current.index() == 0) {
            $current.removeClass('current').prev().addClass('current');
            scrollTo($current.prev());
        }
    });
})();

#scroll-menu {
    position: fixed;
    right: 50px;
    top: 50px;
    z-index: 1;
}

.background {
    background: green;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background:nth-child(2) {
    background: red;
}

.background:nth-child(3) {
    background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll-menu">
    <div class="container clear">
		    <a id="prev" href="#">prev</a>
        <a id="next" href="#">next</a>
	  </div>
</div>
    
<main role="main">
    <article class="background current">
        <h1>Title</h1>
    </article>
    <article class="background">
        <h1>Title</h1>
    </article>
    <article class="background">
        <h1>Title</h1>
    </article>
</main>