当用户滚动时，跳转到下一个div并使其在屏幕上居中

Question

我正在构建一个单页网站，并希望拥有多个div，这些div大约相互400px（但各不相同）。而不是平滑滚动，我想跳到下一个div并让它在屏幕上居中，同时调整上下内容的不透明度以引起对中心div的注意。

我尝试过使用几个滚动插件，但没有做任何我做的事情，大多数都是针对整页div，而不是只有1/3左右的页面高度。

有人可以指出我可以适应的事情来执行此操作。

Answer 1

1. 向文档添加事件侦听器，以查找具有类.next
的元素
2. 获取从视口顶部到相关元素顶部的距离
3. 减去视口高度值的一半减去元素的高度。
4. 如果元素大于视口，则scoll到元素顶部
5. 或将元素滚动到中间。
6. 设置未聚焦元素的不透明度。

（Demo）

(function(){
    "use strict";
    document.addEventListener('click', function(e) {
        if(e.target.className.indexOf('next') >= 0) {
            var current = e.target.parentElement
            var next = current.nextElementSibling || false;
            if(next) {
                var nextNext = next.nextElementSibling;

                var height = next.offsetHeight;
                var top = next.offsetTop;
                var viewHeight = window.innerHeight;
                if(viewHeight - height > 0) {
                    var scrollTo = top - ((viewHeight - height) / 2);
                } else {
                    var scrollTo = top;
                }
                window.scroll(0, scrollTo);

                current.style.opacity = '0.5';
                next.style.opacity = '1';
                if(nextNext) nextNext.style.opacity = '0.5';
            }
        }
    }, false);
})();