Question

My page consists of an Accordion (from Primefaces) with 9 categories. In one category I have a table with a width bigger than my screen width. I decided to use a better looking horizontal scrollbar than the default, so I searched and found a jQuery scrollbar called Malihu Scrollbar

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

After some research, I successfully managed to use it in the specific accordion tab as a horizontal scrollbar. The problem is that when I leave the specific tab expanded, my whole body cannot scroll down to bottom, but instead it automatically scrolls some pixels above the bottom (I lose about one accordion tab header), either when I scroll using mouse wheel or when I scroll using the scrollbar of my whole body (I want to point out here that the scrollbar of the whole body is not a custom scrollbar but a common one). If the tab with the custom scrollbar is not expanded, my page works great.

This is my accordion scrolled to the bottom: Accordion scrolled to the bottom

And this is the most I can scroll my page down, when the accordion tab with the custom scrollbar is expanded: Accordion with autoscroll problem

As you can see the body is not fully scrolled to the bottom. If I try to scroll it to the bottom it goes right up to this position until I collapse the tab which is open.

Was it helpful?

Solution

I found the solution.

First of all the problem was in an option of Malihu Scrollbars called autoExpandHorizontalScroll. I am not sure what this option exactly does but it is necessary. If this option is not on, the scrollbar doesn't appear when I put my table in the accordion. When I put my table outside the accordion the scrollbar works fine even with autoExpandHorizontalScroll set off. My code in XHTML is:

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

As I said before, when I put my table outside the accordion the scrollbar appears anyway. The difference is that when autoExpandHorizontalScroll is true I get the autoscroll problem (described in the original post), but when I set it to false, my body stops this annoying autoscrolling. So I decided to take a look at Malihu's code to see what this option does.

autoExpandHorizontalScroll appears in two functions: init:function(options), and update:function() and it does just the following in both cases:

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();

I don't know what the idea here is, but after some experimenting with it, I just removed the part that is in init:function(options) (comment it on line 214) and left the part that is in the update function. After this, the scrollbar works perfectly in the accordion and no autoscroll problem is bothering me anymore.

By the way: Sorry for posting a so specific question. I hope somebody finds it useful

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top