1
我想创建一个无缝滚动页面我正在建设有一个内部滚动div。以下是我希望它工作的方式：页面滚动+内部滚动Div与JS和CSS
- 用户向下滚动页面，直到scrollTop达到div的顶部。
- div从overflow：hidden变为overflow：scroll。
- 用户然后滚动div，直到它们结束。
- 页面开始再次滚动，div从溢出返回：滚动到溢出：再次隐藏。 （这是如此，如果他们反向滚动备份页面，当他们击中div时，它不会开始滚动过早。）
该过程应该以相反的方式工作。我认为使用状态可能会有帮助。我的三个状态是前,在和后。如果你通过门槛，你的状态是前，它更改为在和股利“解锁”滚动。然后，当你完成滚动的div，它自然推动整个页面。状态从转换为到后。
我的问题是，如果你滚动速度太快，浏览器不会注册这些变化，直到为时已晚，div已经过去了。我写了这个代码来管理过渡：
function onScroll() {
if (cur_coord > cap_y &&
cap_state == 'pre') { // Pre -> On
container.css({ 'overflow-y':'scroll'});
$(window).scrollTop(cap_y);
cap_state = 'on';
} else if (cur_coord > cap_y &&
cap_state == 'on') { // On -> Post
container.css({ 'overflow-y':'hidden'});
cap_state = 'post';
} else if (cur_coord < cap_y &&
cap_state == 'post') { // Post -> On
container.css({ 'overflow-y':'scroll'});
$(window).scrollTop(cap_y);
cap_state = 'on';
} else if (cur_coord < cap_y &&
cap_state == 'on') { // On -> Pre
container.css({ 'overflow-y': 'hidden'});
cap_state = 'pre';
}
}
和我创建了一个以小提琴演奏：
任何思考一个我怎么可能做出这种无缝滚动体验？
谢谢！