Vertical scrolling of Mac OS X Lion style page content
Good afternoon, Habr!
Not so long ago, I left a very categorical comment in the topic about the modernization of scrollbars and, literally, in a couple of days I was forced to solve the problem of its (scrollbar) upgrades. So it happened the stars, that in the user interface of one of the projects of the standard scroll bar a place could be found, but it is extremely undesirable. Of all the possible options, something was chosen between the scrollbar of the new Gmail, the task is similar to Mac OS X Lion, because “oh, they are cool”. I armed myself with js and jQuery, and this was brought to light.
The script is able to: scroll a block with a certain class of “screen”, provided that it goes beyond the screen by dragging the slider or turning the mouse wheel. The scroll bar appears when scrolling with the wheel or when the mouse cursor approaches the right edge of the screen. When the window is resized, the size of the slider and its position change accordingly.
')
To work requires: jQuery and the component jQuery UI - draggable, as well as any normal browser (in IE8 - work, alas, will not).
Problems not resolved in the current version: incorrect processing when changing the scale of the text.
In the plans: to get rid of what was described in the previous paragraph and from draggable, to issue a jQuery plugin, to work in IE8- (the main problem is to work on the onmousewheel event), to add the functionality of the Humpback infoscroller.
Reference to a working example
The code, inclusion, styles and hanging functions for events - in the source.
For this, I hope that this essay will not be superfluous.
Not so long ago, I left a very categorical comment in the topic about the modernization of scrollbars and, literally, in a couple of days I was forced to solve the problem of its (scrollbar) upgrades. So it happened the stars, that in the user interface of one of the projects of the standard scroll bar a place could be found, but it is extremely undesirable. Of all the possible options, something was chosen between the scrollbar of the new Gmail, the task is similar to Mac OS X Lion, because “oh, they are cool”. I armed myself with js and jQuery, and this was brought to light.
The script is able to: scroll a block with a certain class of “screen”, provided that it goes beyond the screen by dragging the slider or turning the mouse wheel. The scroll bar appears when scrolling with the wheel or when the mouse cursor approaches the right edge of the screen. When the window is resized, the size of the slider and its position change accordingly.
')
To work requires: jQuery and the component jQuery UI - draggable, as well as any normal browser (in IE8 - work, alas, will not).
Problems not resolved in the current version: incorrect processing when changing the scale of the text.
In the plans: to get rid of what was described in the previous paragraph and from draggable, to issue a jQuery plugin, to work in IE8- (the main problem is to work on the onmousewheel event), to add the functionality of the Humpback infoscroller.
Reference to a working example
The code, inclusion, styles and hanging functions for events - in the source.
For this, I hope that this essay will not be superfluous.
Source: https://habr.com/ru/post/133077/
All Articles