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

时间:2013-08-05 12:12:02

标签: jquery scrollbar autoscroll

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

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

经过一些研究,我成功地在特定的手风琴标签中将其用作水平滚动条。问题是当我离开特定标签时,我的整个身体无法向下滚动到底部,而是自动滚动底部上方的一些像素(我丢失了大约一个手风琴标签标题),或者当我使用鼠标滚轮滚动或当我使用我的整个身体的滚动条滚动时(我想在此指出整个滚动条不是自定义滚动条而是常见滚动条)。如果未展开包含自定义滚动条的选项卡,则我的页面效果很好。

这是我的手风琴滚动到底部: Accordion scrolled to the bottom

当扩展自定义滚动条的折叠式选项卡时,这是我可以向下滚动页面的最多次数: Accordion with autoscroll problem

正如您所看到的,身体没有完全滚动到底部。 如果我尝试将其滚动到底部,则会直到此位置,直到我折叠打开的标签。

1 个答案:

答案 0 :(得分: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行发表评论)并离开更新功能中的部分。在此之后,滚动条在手风琴中完美运行,并且不再有自动滚动问题困扰我了。

顺便说一句:抱歉发布了这么具体的问题。我希望有人发现它很有用