jquery.tscroll.js
Advanced tools
Readme
Tscroll provides custom replacements for stock vertical scrollbars. Improvements include flexible styling, consistent cross-platform look, left-hand or right-hand placement, and better compatibility with map interfaces because the pointer will not be captured by a scroll area passing beneath it.
Tscroll is used in commercial SPAs and uses techniques featured in the book Single page web applications - JavaScript end-to-end
$<outer_div>.tscroll( <inner_div> [, { pos_key : 'left' } ] )
// Standard
$<outer_div>.tscroll( '<inner_div>' );
// Left scroll bar
$<outer_div>.tscroll( '<inner_div>', { pos_key : 'left' } );
// Refresh scrollbar height (useful after a window resize)
$<outer_div>.tscroll();
'<inner_div>' may be a string selector or a jquery collection.
Please see the tscroll-test.html file for a demonstration of use.
We must use jQuery 1.7.0+. We also require the following jQuery plugins be installed and processed by the browser before this plugin is added or used:
jquery.event.ue)jquery-mousewheel)jquery.tscroll works in any modern browser (IE9+ and later version of Chrome, Safari, and Firefox). IE9 may require edge settings:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
....
We need to create an a div that contains another div. The outer div defines the "window" on the content. The inner div is the container for that content. The outer div should have these CSS attributes:
overflow : hiddenpadding : 0 1em 0 0 where the 1em right padding accomodates the
scrollbar width. Switch this to padding : 0 0 0 1em if we elect
to place the scroll bar on the left. There should be no other
padding or it will hose our scrollbarsposition : absolute or position : relativewidth, height and the
top-left-right-bottom propertiesThe inner div should have these CSS attributes:
We may have multiple tscroll areas active at once in a window that are
individually activated. We should have also have a window.resize
handler so the scrollbar can be recalculated whenever the window is
resized for any reason. The example HTML illustrates all these concepts.
Like many jQuery plugins, this code does not throw exceptions. Instead, it does its work quietly.
jQuery used with this and a few other well-chosen tools forms a fantastic basis for a lean, easy to use SPA architecture as detailed in Single page web applications, JavaScript end-to-end. Here are the recommended tools:
| Capability | Tool | Notes |
|---|---|---|
| Websockets | Socket.io | Prefer websockets over AJAX. |
| AJAX | jQuery native | Use jQuery AJAX methods. |
| Promises | jQuery native | Use jQuery promise methods. |
| Model Events | Global Events | jQuery plugin eliminates having |
| to manage multiple event types. | ||
| Touch | Unified events | Unify desktop and touch events. |
| Routing | uriAnchor | jQuery plugin for robust routing. |
| Includes support for dependent | ||
| and independent query arguments. | ||
| Data Model | taffyDB | A powerful and flexible SQL-like |
| client data management tool. | ||
| SVG | D3 | Great for easy graphs and charts |
| SVG | Low-level jQuery plugin | |
| Templates | Dust | Uses a powerful template DSL that |
| minimizes chances to intemingle | ||
| business and display logic. |
This suite of tools has all the capabilities of a bleeding-edge SPA "framework" library within the reliable and mature jQuery ecosystem. It can provide an application that is significantly more flexible and testable since display logic can easily be decoupled from business logic. Finally, it leverages jQuery's maturity, performance, and excellent tools instead of competing with them.
2013-2015 Michael S. Mikowski (mike[dot]mikowski[at]gmail[dotcom])
Dual licensed under the MIT or GPL Version 2 http://jquery.org/license
First public release through npm
Updated description
Updated documentation
Added dependencies
Added keywords
You don't have to do this you know. Native scroll bars work fine in many instances.
If you want to help out, like all jQuery plugins this is hosted at GitHub. Any improvements or suggestions are welcome! You can reach me at mike[dot]mikowski[at]gmail[dotcom].
Cheers, Mike
FAQs
Tscroll provides custom replacements for stock vertical scrollbars. Improvements include flexible styling, consistent cross-platform look, left-hand or right-hand placement, and better compatibility with map interfaces because the pointer will not be cap
The npm package jquery.tscroll.js receives a total of 1 weekly downloads. As such, jquery.tscroll.js popularity was classified as not popular.
We found that jquery.tscroll.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.