javascript - 到达 scrollspy 部分的末尾时强制停止滚动

Question

here is a fiddle to know where I am starting from

我要解决的问题涉及对单个 html 文件的内容进行“分页”，以一种将它们一次锁定在一个部分中的方式。我想要它，以便当用户滚动到某个部分的底部时，它会向上滑动提示以移动到下一页，这将是 fire a transition, such as different easing/from bottom并将它们“放入”下一节。

这将在下一节中重复；当他们滚动到顶部时，他们将获得一个“上一个”按钮，但除非他们单击“上一个”，否则无法移动。如果他们触底，他们将无法在不单击“下一步”的情况下移动到下一页。如果他们单击一个部分选项卡，它会进行转换并将他们从当前页面带到该页面

我知道这将停止滚动，但如何修改它以防止以这种方式滚动？

$('body').on({
'mousewheel': function(e) {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
    }
})

Answer 1

您可以使用 window.scrollTo 让窗口继续滚动回元素。

我得到元素的顶部底部位置和高度，然后当元素在窗口中时我scollTo 窗口innerHeight 和元素位置。

var el = document.querySelector('.stop');

window.addEventListener('scroll', function (e) {
    var elementPos = el.getBoundingClientRect(),
        elBot = elementPos.bottom,
        elHeight = elementPos.height,
        curTop = window.pageYOffset || document.documentElement.scrollTop; 

    if(elBot <= window.innerHeight-elHeight){
         window.scrollTo(0,curTop-(window.innerHeight - elBot));
    }
});

Live Demo

And a more complete example with clicking to move on, just to illustrate further.