使用jquery在固定的div元素内滚动

Question

我有一个固定位置侧边栏，里面有一些容器，溢出：auto，所以它们可以与身体分开滚动，我想做的是滚动元素.left当身体滚动。

我可以让它以相反的方式工作，即.left滚动并且身体在滚动时移动（参见jsfiddle）。

$(function(){

    $('.left').scroll(function(){
        $('body').scrollTop($(this).scrollTop());    
    })

});

http://jsfiddle.net/g8Krz/403/

我想要实现的是当滚动身体时，.left也会向下滚动。

Answer 1

你走了：

$(function () {

    $('.left').scroll(function () {
        $(window).scrollTop($(this).scrollTop());
    });

    $(window).scroll(function () {
        $('.left').scrollTop($(this).scrollTop());
    })

});

http://jsfiddle.net/g8Krz/404/

如果您愿意，也可以滚动到相同的高度百分比，而不是scrollTop()的绝对值。

修改

这是滚动百分比实施。不是最好的，但它有效，并向您展示了一般的想法。

$(function(){

    var $window = $(window);
    var $body = $('body');
    var $left = $('.left');

    var windowScrollHeight = $body.get(0).scrollHeight;
    var leftScrollHeight= $left.get(0).scrollHeight;

    $(window).scroll(function(){
        var windowScrollTop = $window.scrollTop();
        var relativeScroll = windowScrollTop / windowScrollHeight;
        var leftScrollTop = relativeScroll * leftScrollHeight;

        $left.scrollTop(leftScrollTop);
    });

});

http://jsfiddle.net/N3GR8/1/