Question

我正在尝试为我正在构建的具有内部滚动div的页面创建无缝滚动条。以下是我希望它的工作方式：

用户向下滚动页面，直到scrollTop点击div的顶部。
div从overflow：hidden变为overflow：scroll。
用户然后滚动div，直到它们结束。
页面再次开始滚动，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';
    }
}

我创造了一个小提琴：

http://jsfiddle.net/vD8kQ/6/

我有什么想法可以让它成为无缝滚动体验吗？

谢谢！

Answer 1

如果你想建立自己的卷轴，这不是一个选择。如果您不介意使用jQuery库... http://manos.malihu.gr/jquery-custom-content-scroller/

使用JS和CSS的Page Scroll + Internal Scrolling Div

1 个答案: