“ScrollPane” Scroll Effect

This is a Scroll Script that allows adding add a custom horizontal scroll for extra content inside the block.

JavaScript
In order to make the script work, the index-#.html file with a gallery should contain these lines of HTML code:

The ScrollHorizontalPane.js file contains these lines of code that initialize the script functionality with basic values:

Here the script attributes define the following values:

•    scrollbarHeight – the height of the generated scrollbar in pixels;
•    scrollbarMargin – the amount of space to leave on the side of the scrollbar in pixels;
•    wheelSpeed – the speed the pane will scroll in response to the mouse wheel in pixels;
•    showArrows – whether to display arrows for the user to scroll with;
•    arrowSize – the height of the arrow buttons if showArrows is set to true;
•    animateTo – whether to animate when calling scrollTo and scrollBy;
•    dragMinWidth – the minimum width to allow the drag bar to be;
•    dragMaxWidth – the maximum width to allow the drag bar to be;
•    animateInterval – the interval in milliseconds to update an animating pane (default 100);
•    animateStep – the amount to divide remaining scroll distance by when animating (default 3);
•    maintainPosition – whether you want the contents of the scroll pane to maintain it’s position when you re-initialize it – so it doesn’t scroll as you add more content (default true);
•    resize – whether or not to have resizing turned on or not;
•    minimumWidth – the minimum width to allow the jScrollHorizontalPane to be resized to; only effective when resize is on;
•    reset – when set to true all the global properties will be reset. This is useful for dynamic refreshes on the page.

HTML
Below you can see general HTML script representation:

CSS
You can find script related stylesheet in the main style.css file.