使用 jQuery 自定义滚动条自动滚动我的身体答案

【问题标题】：Using a jQuery custom scrollbar autoscrolls my body使用 jQuery 自定义滚动条自动滚动我的身体
【发布时间】：2013-08-06 03:25:09
【问题描述】：

我的页面包含一个 Accordion（来自 Primefaces），有 9 个类别。在一个类别中，我有一个宽度大于屏幕宽度的表格。我决定使用比默认更好看的水平滚动条，所以我搜索并找到了一个名为 Malihu Scrollbar 的 jQuery 滚动条

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html

经过一番研究，我成功地在特定的手风琴选项卡中将其用作水平滚动条。问题是，当我将特定选项卡展开时，我的整个身体无法向下滚动到底部，而是会自动滚动底部上方的一些像素（我丢失了大约一个手风琴式选项卡标题），无论是当我使用鼠标滚轮滚动，或者当我使用全身的滚动条滚动时（我想在这里指出，全身的滚动条不是自定义滚动条，而是通用滚动条）。如果带有自定义滚动条的选项卡没有展开，我的页面效果很好。

这是我的手风琴滚动到底部：

当带有自定义滚动条的手风琴标签展开时，这是我最多可以向下滚动页面：

如您所见，正文并未完全滚动到底部。 如果我尝试将它滚动到底部，它会一直向上移动到这个位置，直到我折叠打开的标签。

【问题讨论】：

标签： jquery scrollbar autoscroll

【解决方案1】：

我找到了解决办法。

首先，问题出在 Malihu Scrollbars 的一个名为 autoExpandHorizontalScroll 的选项中。我不确定这个选项究竟做了什么，但这是必要的。如果此选项未打开，则当我将表格放入手风琴时，滚动条不会出现。当我把我的桌子放在手风琴外面时，即使 autoExpandHorizontalScroll 关闭，滚动条也能正常工作。我在 XHTML 中的代码是：

<script>
    (function($){
        $(window).load(function(){
            $(".horizontalScrollbar").mCustomScrollbar({
                scrollButtons:{ enable:false },
                horizontalScroll:true,
                advanced:{autoExpandHorizontalScroll:true}
            });
        });
    })(jQuery);
</script>

正如我之前所说，当我将桌子放在手风琴外面时，滚动条还是会出现。不同之处在于，当 autoExpandHorizontalScroll 为 true 时，我会遇到自动滚动问题（在原始帖子中进行了描述），但是当我将其设置为 false 时，我的身体会停止这种烦人的自动滚动。所以我决定看一下 Malihu 的代码，看看这个选项有什么作用。

autoExpandHorizontalScroll 出现在两个函数中：init:function(options) 和 update:function()，它在两种情况下都执行以下操作：

mCSB_container.css({"position":"absolute","width":"auto"}).wrap("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />").css({"width":mCSB_container.outerWidth(),"position":"relative"}).unwrap();

我不知道这里的想法是什么，但是在尝试了一些之后，我只是删除了init:function(options)中的部分（在第214行评论）并留下了该部分那是在更新功能中。此后，滚动条在手风琴中完美运行，不再有自动滚动问题困扰我。

顺便说一句：很抱歉发布了一个如此具体的问题。我希望有人觉得它有用

【讨论】：