CODEWITHSUNDEEP
jscrollpanearrow-keys
maximumride
maximumride

Reputation: 311

How to Hide the up or down arrow key when scrolling at the end of the Jscrollpane

I used the JScrollPane from http://jscrollpane.kelvinluck.com/ and modified it to hide the arrow key when scrolling at the end (top or bottom). When scrollbar is at the top, the arrowUp should disappear, showing only arrowDown at the bottom and appears again when scrolling down.

I've made the arrow image disappear at the top, but the problem is the scroll track does not change but just adds extra space equal to the size of the arrow image at the very bottom. How can I go around this, how do I change it so that when the arrow is hidden at one end, the jspTrack's height is adjusted as well, showing the other arrow on the opposite end without extra space?

if (settings.showArrows) {

                if(isAtTop){
                    arrowUp.addClass('jspDisabled');
                    arrowUp.css('display', 'none');
                }
                else{
                    arrowUp.removeClass('jspDisabled');
                    arrowUp.css('display', 'block');
                }

                if(isAtBottom){
                    arrowDown.addClass('jspDisabled');
                    arrowDown.css('display', 'none');
                }
                else{
                    arrowUp.removeClass('jspDisabled');
                    arrowDown.css('display', 'block');
                }

                /*arrowUp[isAtTop ? 'addClass' : 'removeClass']('jspDisabled');
                arrowDown[isAtBottom ? 'addClass' : 'removeClass']('jspDisabled');*/



            }

Thanks all.

Upvotes: 0

Views: 1479

Answers (1)

Rahen Rangan
Rahen Rangan

Reputation: 715

you can control it via css

<style>
.jspVerticalBar{
  background:none;
}
.jspVerticalBar .jspArrow{
  display:block;
}
.jspVerticalBar .jspDisabled
{
  display:none;
}
</style>

JavaScript:

<script>
 $('.pane').jScrollPane({showArrows:true});
</script>

Upvotes: 1

Related Questions