在另一个 div 中水平滚动 div答案

【问题标题】：Scroll a div horizontally in an other div在另一个 div 中水平滚动 div
【发布时间】：2013-09-24 15:42:48
【问题描述】：

我想重现这个（效果很好）：

但我不希望它应用于 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');
    }

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

【问题讨论】：

感谢您的帮助。这正是我所需要的

标签： jquery html horizontal-scrolling

【解决方案1】：

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

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

你可以在 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>

您可以找到该代码的实现in this jsFiddle。

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

【讨论】：