1

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

  1. 用户向下滚动页面，直到 scrollTop 到达 div 的顶部。
  2. div 从溢出：隐藏变为溢出：滚动。
  3. 用户然后滚动通过 div，直到他们到达终点。
  4. 页面再次开始滚动，并且 div 再次从 overflow:scroll 返回到 overflow:hidden。（如果他们反向滚动页面，当他们点击 div 时，它不会过早开始滚动。）

该过程应该以相同的方式反向进行。我认为使用状态可能会有所帮助。我的三个状态是pre、on和post。如果您通过阈值并且您的状态是pre，它会更改为on并且 div “解锁”以进行滚动。然后，当您完成滚动 div 时，它会自然地将整个页面向上推。状态从on切换到post。

我的问题是，如果你滚动得太快，浏览器不会注册这些更改，直到为时已晚，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/

有什么想法可以让这成为一种无缝的滚动体验吗？

谢谢！

4

1 回答 1

1

如果您想构建自己的滚动条，这不是一个选项。如果您不介意使用 jQuery 库... http://manos.malihu.gr/jquery-custom-content-scroller/

于 2013-03-15T16:10:17.407 回答