Customizable, Extendable, and High-Performance JavaScript-Based Scrollbar Solution.
Home Page: https://idiotwu.github.io/smooth-scrollbar/
License: MIT License
Hello there! This is Daofeng Wu (a.k.a. Dolphin Wood).
Specs >
Focused on unleashing the potential of the Web.
|
|
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Not an issue, but just wanted to ask if this plugin supports horizontal scroll with mouse wheel? Or any examples on how to implement this.
Thanks for a great plugin.
I got this beautiful plugin working with firefox but when I use chromium to go to my website the scroll is not working (the default scrollbar is hidden and the plugin is doing nothing).
I have a subdomain where I manually hide the scrollbar (html, body { overflow: hidden }) and I enable it in <main> and there it is working for both browsers.
Including the plugin normally inside the <head> element:
<link type="text/css" rel="stylesheet" media="all" href="<?= $static; ?>css/smooth-scrollbar.css" />
<script type="text/javascript" src="<?= $static; ?>js/smooth-scrollbar.js"></script>html, body { width: 100%; height: 100% }
main { width: 1170px; }Scrollbar.init(document.getElementsByTagName('body')[0], options);The above is working fine in firefox, but for some reason, is not for chromium (the first one I tried).
Now, for my subdomain:
html, body { overflow: hidden; width: 100%; height: 100vh }
main { overflow: auto; width: calc(100% - 200px); height: calc(100vh - 95px) }Scrollbar.init(document.getElementsByTagName('main')[0], options);The above is working fine in both browsers. So my question is: Am I doing something wrong or is it a bug in the plugin?
Thanks! I really love this plugin!
(Please, Understand my poor english.)
First of all, I really appreciate that you've done this. I was looking foward to find perfect scrollbar. Finally, I found this. And, I have a little suggestion.
I think it would be good to enable horizontal scrolling by wheel. So, I have tweaked slightly.
_this.__addMovement(y, x, true); in wheel.js.You can see how it works at link below. (I applied smooth-scroll that enabled horizontal scrolling by wheel.)
http://lp.anzi.kr
I'm just a humble developer. (Actually, I'm a designer)
so, It would be not correct what I did. but, It works.
Consider about this issue. If it is worth for this project.
Thanks again! :)
when adding via instance.addListener(fn) im unable to remove using removeListener
and comparing the handler function with the one stored in __listeners array equates to false
Would it be possible to pass in scrollbar position via props? Setting via setPosition causes listeners to get always called and so no when i have some external source of content shifting i cannot update state of scrollbar as it will end up in a loop of updates. My case is a bit odd as I'm trying to use your scrollbar as a 'virtual scrollbar'. Content is actually not in it. i'm puting into content some invisible dummy and relying on whats get back from scroll listener on current position i'm loading from a service related content at such positions. Otherwise i would have to load hundreds of megs of data.
Hey @idiotWu,
Is it possible to don't show the scrollbar-thumb when there is no content? I modify a little bit the css code to keep always the scrobar vissible. When there is no content the scrollbar-track is showed as expected properly but the scrollbar-thumb is overlaping it.
Another improovements could be to disable the overscrollEffect when there is no content also.
Thanks for your help!
Do they not have respective event handlers? Would be nice to have the expected behaviour on these. Personally, I totally abuse these keys when there's a lot to scroll :).
i was trying to use it on my ajax response page , so basically the user click the menu and ajax request and get the page , the scrollbar work just fine if normal page , but once the page switch , the scroll bar is gone. i try to repugin back in but noting works.
question:
1.isit a bug having or ajax response page ? or can you make a easy sample to check isit a bug ?
2.if not the only problem i can think of is the scroll bar need update or asynchronous.
so i try this
Scrollbar.initAll({ syncCallbacks: true });
is not working as wel , am i doing the right way ?
the scrollbar looks fantastic , thank you for making.
please let me know if you have any answers, have a good day.
Inspired by https://github.com/yiminghe/dom-scroll-into-view
You can't use this library since smooth-scrollbar use animation for scrolling.
The only additional functionality is to add an instance method that accept a node with some usefull parameters to improve user experience (onlyScrollIfNeeded, offsetTop etc. -> see dom-scroll-into-view).
Would be very cool when this library would support this!
Hey @idiotWu,
Take a look to this example: http://jsbin.com/mipugekafa/edit?html,css,js,output
Why when the scrollbar is moving I can't interact with any element (textbox, buttons, links,...). In the example above I put some links but it seems when scrolling is impossible to reach them even when it stops and the cursor is over a link I need to move a little bit to change to the pointer icon of the cursor and make clicking possible.
Do you know what is happening this behaviour?
PS: I put some CSS style in order to see easily what is happening. See how the background-color of the links dosn't update when the scrollbar is moving but the cursor is over them. Could be something related with syn/async painting/rendering...?
PS2: Maybe something related with layou/reflow/repaint procces?
Thanks!
I'm using a (mini) jquery plugin to scroll to top (alongside jquery.easing) when the user scrolls past the header so he/she can easily return to top. The thing is, this javascript plugin does not trigger the normal scroll event and the button never appears. I'd love to remove both jquery plugins and only use smooth-scrollbar :)
$().UItoTop({
easingType: 'easeOutQuart'
});I now have to manually listen to the click event of the button (I'll use jquery for this) and using the smooth-scrollbar method instance#scrollTo( x, y, [duration], [callback] ) to do the scrolling.
What i don't know is how to check when the scroll bar is past the <header> element so that I can unhide the button .toTop (that is hidden while the <header> element is visible). Also (if possible) minding the different screen sizes?
$('.toTop').click(function() {
Scrollbar.scrollTo(0, 0, 300)
});
if (!Scrollbar.isVisible(document.getElementsByClassName('toTop')[0]) {
$('.toTop').show();
}Like that?
Sorry, I'm only familiar with jquery :P
(Edit)
Also, the <a> button have position: fixed but when I scroll, the element is not fixed, any way to fix this? Should I open a new issue for this?
So, I start with some html like this:
<scrollbar>
<div>some long content</div>
</scrollbar>
and I init it like this:
Scrollbar.initAll();
The resultant dom elements look like this:
<scrollbar data-scrollbar tabindex="1" class style="overflow: hidden; outline: none;">
<article class="scroll-content">
<div>some long content</div>
<article>
<aside class="scrollbar-track scrollbar-track-x" style="display: none;">...</aside>
<aside class="scrollbar-track scrollbar-track-y" style="display: none;">...</aside>
</scrollbar>
I import smooth-scrollbar.css. The browser window is small so the scrollbars should be visible. Any idea what I should do?
Some devices already offer smooth momentum scrolling, this script shouldn't interfere with that because native behavior is unmatchable (i.e. momentum overscroll) and scripts like this degrade the experience rather than improve it.
My suggestion is to detect the delta and if it's already low, detach WHEEL_EVENT or don't .preventDefault()
Hi, I found an issue with the scrollbar in FireFox and IE11.
When you scroll the page with a mouse (by dragging handler up/down) you get highlighted all items on the page if a cursor doesn't stay inside the handler.
Would be great to have the same consistent behavior, as we have in Chrome, in FireFox and IE11 as well.
Open the example in FireFox or IE11:
http://idiotwu.github.io/smooth-scrollbar/
Click on handler and drag it up/down (don't release mouse).
if you move the cursor outside of the handler (without releasing mouse button), you will get highlighted items on the page.
Screenshot attached:
Doesn't seem to work in IE and Edge. (windows 7 & windows 10) smooth-scrollbar v7.1.1
Demo page:
HTML1300: Navigation occurred.
File: smooth-scrollbar
HTML1509: Unmatched end tag.
File: smooth-scrollbar, Line: 67, Column: 110
HTML1509: Unmatched end tag.
File: smooth-scrollbar, Line: 68, Column: 114
SCRIPT438: Object doesn't support property or method 'assign'
File: app.js, Line: 2, Column: 12550
My tests:
HTML1300: Navigation occurred.
File: index.html
SCRIPT438: Object doesn't support property or method 'assign'
File: smooth-scrollbar.js, Line: 2, Column: 6724
When using the Ajax request data, the scroll bar fails.
Hey @idiotWu,
It would be great if we can decide which scrolbar track we want to show, I mean, 'X' track or 'Y' track.
And beside that, when there is no content you are still showing scrollbar-thumb and is overlaping the style of the track bar.
Thanks!
It would be nice to have an option that listens to the mouse wheel on the window instead of the scroll content.
You can't scroll the page while hovering an element outside of the scroll content.
With an option, you can scroll anywhere on the page, even if your mouse is hover an element outside the scroll content (like the default browser scrollbar).
It doesn't scroll while your mouse hover something outside of the scroll content.
On the demo page, hover the "Scrollbar Monitor" with your mouse and try to scroll with your mousewheel.
Trying to load smooth-scrollbar with jspm. Attempted to override (because default format for npm packages is cjs) like this:
jspm install npm:smooth-scrollbar -o "{format: 'amd'}"
and then import like this:
import {Scrollbar} from 'smooth-scrollbar'
but Scrollbar remains undefined. Any ideas / suggestions?
Thanks in advance
Just a quick note here (to check if it makes sense):
Add "height/width 1s 1s ease" or similar to ".scrollbar-thumb" for cleaner width/height animation of the thumb on window resize to match the browser scrollbar feeling.
I am using ScrollIntoView and it doesn't seem to scroll the entire element into view. It only scrolls to the very top and then stops? Is there a way to fix that? I would like to scroll more than just to the very tip top so that way the element is actually in full view.
const instance = Scrollbar.get(inner);
const edit = document.querySelector('.edit');
instance.scrollIntoView(edit)
Hello,
I'm getting a compile error when I import the module
[Compile Error] Unexpected token (4:20367) in /Users/magicspon/websites/mudstone/node_modules/smooth-scrollbar/dist/smooth-scrollbar.js
As the code is minified so I can't really see where it's failing. I'm not sure if this is an issue with rollup babel.
This is my rollup config (using gulp)
plugins: [
resolve({
jsnext: true,
main: true,
browser: true
}),
commonjs({
include: 'node_modules/**'
}),
eslint({
exclude: $js.lint.ignore
}),
babel({
exclude: 'node_modules/**',
presets: [
'stage-0',
['es2015', { 'modules': false }]
],
plugins: [
'external-helpers',
'syntax-object-rest-spread',
'transform-es2015-parameters',
'transform-es2015-destructuring',
'transform-object-rest-spread'
],
babelrc: false,
runtimeHelpers: true
}),
replace({
ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}),
(process.env.NODE_ENV === 'production' && uglify())
]
Any ideas?
Thanks
Currently, scrollbar acts weird when switching pointers. Here's the todo list:
TouchEvent.changedTouches to track pointers.I'm working at a wordpress theme built with Roots Sage starter one, using the following front-end packages:
sage
├─┬ bootstrap-sass#3.3.6
│ └── jquery#3.1.1
├─┬ magnific-popup#1.1.0
│ └── jquery#3.1.1
├── smooth-scrollbar#7.2.9
├── wow#1.1.2
└── wp-bootstrap-navwalker#2.0.4
Would like to use smooth-scrollbar UI in the main scrollbar of a single-page WP theme; the scroll simply don't work.
Only way to scroll is to drag the scrollbar with mouse pointer. No imput from mousewheel, nor trackpad or touch-imput device.
Firefox 51 console say to me:
Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1535100 px). Occurrences of will-change over the budget will be ignored.
Chrome: silent fail
IE11: silent fail
Init:
var scrollOptions = {
speed: 1,
damping: 0.1,
thumbMinSize: 20,
renderByPixels: true,
continuousScrolling: 'auto',
alwaysShowTracks: false,
overscrollEffect: false,
overscrollEffectColor: '#fff'
};
Scrollbar.initAll(scrollOptions);
Markup:
<main class="main" data-scrollbar>
<!-- get the content -->
<?php include Wrapper\template_path(); ?>
</main>
Css;
main {
height: 100%;
width: 100%;
}
In my custom JS i have some scroll-related script, mainly to show/hide menu bars, i have not understand if this plugin affect the ordinary scroll event.
I have a scrollable content area with content in it. I listen to the key up/down event to jump to the next/prev. items.
The problem is that smooth-scrollbar catch this events in (https://github.com/idiotWu/smooth-scrollbar/blob/master/src/events/keyboard.js) and handle it itself w/o propagation.
This event's are nice but I need an exception for the up/down keys.
Have you an idea how to solve that? Maybe some modification in this lib?
RT. Github上一千多颗星星的smooth scroll跟这个差远了.
多谢作者! 1024
The demo page doesnt work in IE11 when I tried testing it on a Windows Surface.
demo page
shows upper part of the website without the ability to scroll down.
Open the demo page in IE11 on a Windows Surface
Hey @idiotWu,
Is it possible to don't show scrollbar-thumb when there is no content? I modify a little bit the css code to keep always visible the scrollbar but the problem comes when there is no content at all. The scrollbar-track is properly showed as one expected even if there is no content but yhe scrollbar-thumb is overlaping it.
Thanks for your help!
how do addListener and infinite scroll work ?
i want fire a event when it scrollbar scrolling and when reach page bottom i also want to fire a function.
seem like this two can help me to done that , but i have read it but i am confuse how it work.
this is my sample
var instance = Scrollbar.init(document.getElementById('ele'))
instance.infiniteScroll((status) => {
alert("check");
}, 50);
it didt work and i also dont know to addListener work ?
instance.addListener( scroll ); ?
There is a typo in friction firld/property/option it is missing secind "i" and is 'fricton' it break in react version
The gulpfile.js and bower.json files are not being ignored in package.json, and thus are being distributed with the npm package.
When you have scrolled at the very bottom of the scrollarea and then remove a node of the bottom then update with .update() the scrollbar not recalculate. It appears a gap there. When you scroll then this gap is disappearing instantly and the scrollbar is updated.
Hello,
Probably I do something wrong here, but I have this error:
smooth_scrollbar.js:6 - Uncaught SyntaxError: Unexpected token import
Someone can help me?
hi , im using this angular plugin but im not getting horizontal scroll.
im getting only vertical.
i wrriten like
<scrollbar style="height:150px;width:400px;padding:5px;border:1px solid;margin-left:20%;" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</scrollbar>
and some custom style like
<link rel="stylesheet" href="http://idiotwu.github.io/angular-smooth-scrollbar/bower_components/smooth-scrollbar/dist/smooth-scrollbar.css">
<style>
.scroll-content {
border:1px solid transparent;
padding-bottom:10px;
}
.scroll_style, scrollbar {
overflow:hidden !important;
}
</style>
and finally i have included bellow files
<script src="http://idiotwu.github.io/angular-smooth-scrollbar/bower_components/angular/angular.js"></script>
<script src="http://idiotwu.github.io/angular-smooth-scrollbar/bower_components/smooth-scrollbar/dist/smooth-scrollbar.js"></script>
<script src="http://idiotwu.github.io/angular-smooth-scrollbar/dist/angular-smooth-scrollbar.js"></script>
for reference i attached screen shot
Hey @idiotWu
Great job in this component!
I'm wondering if it's possible use 'require' in order to import the component instead of 'import'. If is that possible, How is suppose to be?
Thank you.
Hey,
Please explain how to use this plug-in a little better. Your documentation makes no sense. You also have a ton of files in which we have no idea what to do with.
It's a shame because this looks like it could be good.
Thanks,
RS.
Hello,
Is there a way to make div element inside scrollbar container to stick always to top during scrolling?
Setting position: fixed, top: 0, left: 0, right: 0 didn't work.
Hey @idiotWu,
Is it possible to don't show scrollbar-thumb when there is no content? I modify a little bit the css code to keep always visible the scrollbar but the problem comes when there is no content at all. The scrollbar-track is properly showed as one expected even if there is no content but yhe scrollbar-thumb is overlaping it.
Thanks for your help!
As was reported in issue #23, overscroll effect should be turned off when the container is not scrollable.
For debug propose, I think a non minified version can help when debug app. 👍
For some time I'm trying to get to work smooth-scrollbar with iframe-resizer. Up to this time without success.
The problem happens only with Windows and Linux. On OS X works like a charm. If have a time try test it @idiotWu. Thanks!
Windows 8.1
Linux Ubuntu 14.04
I have a scrollable content area (wrapped in <scrollbar data-scrollbar style="max-height: 300px">) that shows a flash of unformatted content for a second while the script loads.
On page load ...
... and a few seconds later ...
Any advice how to prevent the FOUC?
Hello!
First of all thank you for this great plugin! I'm using it on all the websites which I create. No issues at all. One question though.
For a website I used History API for page transitioning experience. I have a static listener for the menu bar (auto hide on scroll, show on scroll up) and listeners for homepage and about page each. The issue is that when I go to about page, I need to remove the listener from the home page (but keep the menu bar listener). I read the documentation for the removeListener method and I managed to get it working by removing index of the __listeners array.
So now I remove the listener like this
instance.removeListener((instance.__listeners[1]));
The index for the menu bar is [0], so I remove the second listener. I believe that this is a little bit dangerous because it's just an index.
How can I remove the listener by its function name?
Thanks!
Hello @idiotWu,
I'm trying to get the offset from an element of scrollable content but what I got is always the same offset values, even is the first element or the last one.
For instance, giving this piece of HTML:
<article class="scroll-content" style="transform: translate3d(0px, 0px, 0px);">
<div class="row nomargin">
<div class="element-detail-box" >
...
</div>
<div class="element-detail-box" >
...
</div>
<div class="element-detail-box" >
...
</div>
<div class="element-detail-box" >
...
</div>
</div>
</article>
if I try to get the offset of one of the "div class="element-detail-box"" element with element.getBoundingClientRect() returns:
bottom: 142
height: 0
left: 220
right: 845
top: 142
width: 625
Any element I test returns the same values, like is always on the top of the viewport. My purpose is to get the offset element to detect if the element is within the viewport or not, in other words if it is visible or not.
I already tryied removing the parent "div class="row nomargin" and leave all the elements inside the "article" but I got the same results.
Is there a way to get the proper offset of the element with respect to the "article" element?
I'm using Chrome 52 on Windows.
Thanks for your help.
Hi @idiotWu ,
We are cdnjs team. We want to host this library.
I found that smooth-scrollbar.js in dist folder has been minified but smooth-scrollbar.css does not.
The auto-updater in cdnjs doesn't support partial minification, so in this case, we should manually minify css file.
I'll respectfully suggest you consider to provide smooth-scrollbar.js, smooth-scrollbar.min.js, smooth-scrollbar.css and ``smooth-scrollbar.min.cssin dist folder, or you can just provide unminifiedsmooth-scrollbar.js` and `smooth-scrollbar.css`. Thank you.
Hi, I've noticed than when you will put huge contrnt - let's say 100.000px height into scrollable are then calculated size of the scroll indicator is nothing - and so it does not get displayed. There shoul be some option to enable setting that let say it can be smaller than 5px so you will be still able to catch it with mouse cursor.
Regards
show tracks on scrollbar hover to better UX, so user will know that area can be scrolled
I noticed on the demo that the angular-smooth-scrollbar does exhibit this behaviour, but the original one doesn't.
Is there a way to enable this in the smooth-scrollbar?
Also, if viewed on an older browser, will it gracefully fall back to the native scrollbar?
Will you be adding any scroll to features? Like scroll to an element or scroll to a set of x or y coordinates?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.