jquery - 在另一个 div 中水平滚动 div

Question

我想重现这个（完美的工作）：

http://jsfiddle.net/PvVdq/

但我不希望它适用于 document.height，只适用于我的 div 高度。

这是我的脚本

if(positionYDiapo<=middleHeight){

        $('#frame').css({position:'fixed', top: positionTop - $(window).scrollTop(), bottom:'auto'}).addClass('stuck').removeClass('anchored');


            if(bottomDiapo<=bottomFrame){
                $('#frame').css({ 'position': 'absolute' });
                $('#frame').css({ 'bottom': '0px' });
                $('#frame').css({ 'top': 'auto' });
                $('#frame').removeClass('stuck').addClass('anchored');
            }

            var $horizontal = $('#frame');

            var s = $(this).scrollTop(),
                d = $(document).height(),
                c = $(this).height();

            scrollPercent = (s / (d - c));

            var position = (scrollPercent * ($(document).width() - $horizontal.width()));

            $horizontal.css({'left': position});    


       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           // downscroll code
           console.log('down');
       } else {
          // upscroll code

          if((bottomFrame)-hauteurDiv>=middleHeight){
             console.log('up');
             $('#frame').css({position:'fixed', top: positionTop - $(window).scrollTop(), bottom:'auto'}).addClass('stuck').removeClass('anchored');

           }
       }
       lastScrollTop = st;  


    }else{
        console.log('no code here');
        $('#frame').css({position:'absolute', top:'0px', bottom:'auto'}).removeClass('stuck').removeClass('anchored');
    }

另外，我需要跟踪动作停止时的左侧位置

Answer 1

好吧，您需要将首先引用文档的所有内容更改为div您希望滚动应用到的内容。

JavaScript 有两个非常方便的函数来确定宽度和长度，称为：

• element.scrollHeight
• element.scrollWidth

你可以通过改变你的函数来在 jQuery 中实现这些函数，如下所示：

$(document).ready(function () {
    var $horizontal = $('#horizontal');

    $('#test').scroll(function () {
        var s = $(this).scrollTop(),
            d = $('#test').get(0).scrollHeight,
            c = $('#test').get(0).scrollWidth,

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * (c - 2*$horizontal.width()));

        $horizontal.css({
            'left': position
        });
    });
});

（我没有检查计算是否绝对正确，所以你可能想调查一下）

使用相应的 HTML 结构：

<div id="test">

// put your content here

</div>

<div id="horizontal">scrolling div</div>

您可以在此 jsFiddle中找到该代码的实现。

我希望这能让你开始。祝你好运！