CleverScrollbar.js - Sidebar for clear navigation
For those who want to immediately see what is at stake: an example of the library . Click on the "Load Scrollbar!" Button to see the result.
I have long wanted to implement this small idea in order to give other people food for thought about how you can make it easier to navigate through the content on the pages of the site.
There is one problem with usability on the vast majority of sites, which annoys me greatly. The essence of the problem lies in the fact that you do not have the opportunity to find out how many percent of all content on a page is, in fact, the most important part of it . Or, if there are a lot of blocks on the site, going one after another - you cannot quickly switch between them.
There are at least two typical situations in which it would be useful to have a small panel on the right side of the browser that would show where we are, how much is left to scroll to the end of the current block, and also what other blocks on this page are available with the ability to go to them .
The first situation : sites like Habrahabra. Article habr is always content + comments. I am personally primarily interested in the content of the article. When I start to read, the first question I have is: how much more is left to read until the article ends? Right now my slider is in the position of 15% of the entire page. And how many comments have been written to her? Until you scroll to the very end of the article, you don’t know ... And you have to scroll.
Another version of this version is situations in which you want to immediately read the opinions of other people about the article. So to say, assess whether it makes sense to read it at all. It would be convenient to be able to go directly to the block with comments.
The second situation : various online stores and landings, in which the page is divided into various information blocks, between which, too, would be better to move somehow faster.
In general, I thought and thought, I thought up. Meet the library that solves these problems.
CleverScrollbar.js
This is a simple sidebar, next to a scrollbar, which helps the user with navigation. This is not a replacement for the main scrollbar, as it may seem from the title. It is rather a small addition to it.
Once again, a link to an example for those who want to see.
If you hover the cursor on the strip, it will unfold and show the block name of the page. Clicking on a block redirects to it.
Installation
Upload the library to your page
<script src="dist/clever-scrollbar.js"></script> You can also download via standards ES5, AMD, and so on.
npm i clever-scrollbar Add additional attributes to the blocks containing the main content of the page.
<body> <div class='head' data-content-block=" ">...</div> <div class='article-content' data-content-block=" ">...</div> <div class='comments' data-content-block=" ">...</div> </body> Run the CleverScrollbar.load() command after downloading all the content!
window.addEventListener("load", function() { CleverScrollbar.load() }) This is all you need to do.
Additional classes
If you need to set for any of the sidebar elements any additional. classes, you can always do this through an additional attribute:
<div class='article-content' data-content-block="Article text" data-content-block-classes='main-content-block other-class' >...</div> Well, I can also note that the library automatically adds to each block classes like .cleverscroll--block-1 , .cleverscroll--block-n , on which you can also hang your own styles to change the appearance of each block.
upd: now the class cleverscroll--block-active is also added for the current active block.
SPA and Ajax applications
If your site dynamically changes its content during operation, use the CleverScrollbar.reload() method to have the library also update its navigation pane.
Stop
Run the CleverScrollbar.stop() command to disable the library. You can also return it back later.
Actually - that's all. More so far, the library can not do anything.
Details of the implementation
The library is written based on the JSPM package manager and the SystemJS asynchronous module loader, and also based on the JSPM 0.17 Beta tutorial, which also contains recommendations for building and publishing independent libraries on the Internet.
The library does not have any third-party jQuery dependencies. Its size in the minifitsirovanny form takes 4kb. The source code is written using some of the features of ES5. I tried to break everything down into small independent files so that other people, if desired, could study its code without any problems.
It is also noteworthy that initially I used the ES5 class to write the core logic of the library, but later, when I saw that JSPM adds some additional functions from Babel to the final build to support classes and increases the library size by ten kilobytes, I rewrote the code to use the usual new function() { ... } instead of the class. So it also works quite well, there is not much difference :)
Perhaps the library will not work correctly in older browsers such as Internet Explorer 8-10 - have not yet verified how it behaves there.
Also, it should be noted that the styles of the library are loaded into the browser with a small code in javascript . Just for convenience, so that people have less to do hand movements. It was also possible to load these styles via SystemJS-loaders - but again, then the size of the final build would grow by some kilobyte, which is not what I really want.
Actually - that's it. So it goes. It seems that I finished. Of course, I would be interested to know the opinions of other people on this topic :) And it will be even more interesting to find out that someone is selling somewhere on some of the sites.
')
Source: https://habr.com/ru/post/315186/
All Articles