Making a scrollbar (cross-browser)

I did not find a similar article on Habré, and then I just had to face this problem.

Consider two solutions to this problem, on different frameworks - jQuery ( jScrollPane ) and MooTools ( MooTools ScrollContro ).


')
So, frameworks.

MooTools ScrollContro

The plugin allows you to replace the scrollbar in any container in which it is used (the number of containers is not limited).
Available features:

• Dragging the slider up and down
• Up and down arrow control
• Use the mouse wheel

Besides:

• Bar size changes depending on block content.
• The mouse wheel is used only when the cursor is over the content.
• If the content is less than the specified space, then the scrollbar controllers will not be displayed.

pros:

• If JavaScript is disabled, the standard scrollbar is displayed.
• The scroll view is fully customizable using CSS
• Unlimited number of scrollbars
• Works in IE, FF, Opera, Safari, Chrome

It is very easy to use. Just place the content in a container with the identifier #contentcontainer:

Text content



At the same time, its design may be different, but in the CSS description there must be an overflow: auto or overflow: scroll attribute. For example:

#contentcontainer {
height: 300px;
width: 435px;
padding-top: 0;
padding-right: 10px;
overflow: scroll;
overflow-x: hidden;
margin-top: 20px;
font-size: 1.1em;
}

You need to enable the work of the plugin itself using a simple function:

window.addEvent('domready', function() {
new ScrollControl($('contentcontainer'), {'createControls': true});
});

When using multiple containers, they need to be assigned different identifiers. You can define the names for the controls and for the scrolling container, if you want the second container to be different from the first:

new ScrollControl($('contentcontainer1'), {'htmlElementPrefix': 'control2_'}, $('scrolltrack1'), $('scrollknob1'), $('scrollUpBtn1'), $('scrollDownBtn1'));

Where:

• htmlElementPrefix - mask container prefix
• scrolltrack1 - an alternative class for the container on which the slider moves
• scrollknob1 - alternative slider class
• scrollUpBtn1 and scrollDownBtn1 - down and up buttons on the scroll

To use, you will need the Mootools 1.11 library and the plugin itself, which can be downloaded from eSteak.net . Plugin created by A + media.

jScrollPane

jScrollPane - jQuery plugin that allows you to replace the default browser scrolling bar in any block with overflow: auto style.
You can change the appearance of scrolling using CSS.

jScrollPane cross-browser jQuery solution. If the user's browser does not support jQuery or JavaScript, then it will see the default system scroll. For an exact copy of all mouse events, you need to connect an additional mouse wheel plugin.

Using
Connect the following files.

• jquery-1.2.6.min.js ( jQuery) jquery.mousewheel.min.js (the mouse wheel ( )) jquery.em.js (the jQEm , ) jScrollPane.js ( jScrollPane ) jScrollPane.css ( )
• jquery-1.2.6.min.js ( jQuery) jquery.mousewheel.min.js (the mouse wheel ( )) jquery.em.js (the jQEm , ) jScrollPane.js ( jScrollPane ) jScrollPane.css ( )
• jquery-1.2.6.min.js ( jQuery) jquery.mousewheel.min.js (the mouse wheel ( )) jquery.em.js (the jQEm , ) jScrollPane.js ( jScrollPane ) jScrollPane.css ( )
• jquery-1.2.6.min.js ( jQuery) jquery.mousewheel.min.js (the mouse wheel ( )) jquery.em.js (the jQEm , ) jScrollPane.js ( jScrollPane ) jScrollPane.css ( )
• jquery-1.2.6.min.js ( jQuery) jquery.mousewheel.min.js (the mouse wheel ( )) jquery.em.js (the jQEm , ) jScrollPane.js ( jScrollPane ) jScrollPane.css ( )

All files can be downloaded from the jScrollPane page.

You can use any selector with respect to the element to which you want to apply the action of the plugin. For example, with the code below, the plugin works when the document contains at least one element with the class scroll-pane:

$(function()
{
$('.scroll-pane').jScrollPane();
});

Extra options:

• scrollbarWidth [int] - the width of the scrollbar in pixels (default 10)
• scrollbarMargin [int] - indent to the left of the scrollbar in pixels (default 5)
• wheelSpeed ​​[int] - control the speed of moving content when scrolling in pixels (default 18)
• showArrows [boolean] - controls the output of up-down arrows ('false' by default)
• arrowSize [int] - the height of the arrows if showArrows = true (calculated from CSS if not specified)
• animateTo [boolean] - defines autoscrolling for a specific flag scrollTo and scrollBy (default is 'false')
• dragMinHeight [int] - the minimum height at which the scroll appears (default 0)
• dragMaxHeight [int] - the maximum height at which the scroll appears (default 99999!)
• animateInterval [int] - Interval in milliseconds to update and animate the scroll area (default is 100)
• animateStep [int] - Determines the distance when reaching which the animation begins (default 3)
• maintainPosition [boolean] - Allows you to fix the position of the content when it changes (the default is 'true')
• scrollbarOnLeft [boolean] - Determines the position of the scrollbar to the left of the content (can also be defined using CSS)
• reinitialiseOnImageLoad [boolean] - Determines whether the script should reinitialize itself when adding an image to the content (default is 'false')