0

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

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

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

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

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

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

4

1 回答 1

1

我找到了解决方案。

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

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

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

autoExpandHorizo​​ntalScroll 出现在两个函数中：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 行评论它）并留下了更新函数中的部分。此后，滚动条在手风琴中完美运行，不再有自动滚动问题困扰我。

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

于 2013-08-07T09:17:49.273 回答