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滚动回元素。

我得到了顶部的顶部位置和元素的高度，然后当元素在窗口I 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.

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

1 个答案: