There are multiple callbacks you can use when building a new instance.
// Called when LetMeScroll is initialized
onComplete: function(){<!--CODEHERE-->}
// Called when scrollbar reaches the bottom.
onEnd: function(){<!--CODEHERE-->}
// Called when scrollbar reaches the top
onTop: function(){<!--CODEHERE-->}
// Called everytime scrollbar moves
onMove: function(){<!--CODEHERE-->}
// Called when Drag starts
onDragStart: function(){<!--CODEHERE-->}
// Called when Drag Stops
onDragStop: function(){<!--CODEHERE-->}
Mobile Only
// Called when Touch starts
onTouchStart: function(){<!--CODEHERE-->}
// Called when Touch Stops
onTouchStop: function(){<!--CODEHERE-->}
◼️
API > Gets:
// Returns container DOM element (With this one, you can add new content)demo.mainElementId// Returns scrollbar container iddemo.scrollbarId// Returns trackbar container iddemo.trackbarId
◼️
Styling :
Using CSS Custom Properties you can easily customize your scrollbar. Check below a list of variables and what they are used for:
Hi,
where I can find the 'config' options? Because based on my testings scrollbar can work without putting dimensions into config but it won't work without 'scroll : (...)'. Where I can find the list of parameters? And the ones that are needed and not needed?
Hello, my friend. Great tool, but when actual height of scrolling container > config.dimensions.height (when we have little content) , we get TypeError: Cannot set properties of undefined (setting 'opacity') from this code:
var hideElement = this.hideElement = function hideElement(element, value) {
element.style.opacity = value;
}
Hello! Usually when I click on the track in the scrollbar, I am able to navigate to the direction I have clicked. This makes interaction more accessible. This could be configurable if needed.
When yellow is selected in the demo, there does not appear to be a yellow-tinted background in the scroll bar. If this is intended, please excuse me. But I thought I'd offer a quick fix in case you wanted it to be like the other colors
Hello, I have implemented your scrollbar and it is awesome!!
I have 3 suggestions.
A first suggestion in case someone needs to implement multiple scrollbars on the page and can't set individual IDs to be known beforehand will be to update the following lines:
as this enables developer to initialize the scroller by CSS selector string and not only by the ID, I have modified the file on my project and it works as a charm.
Second suggestion: maybe adding an entrance animation to the .lms_scroll_track will help prevent some unwanted flickering when initially the scrollbar is display: none, something simple like:
Third suggestion is to add a new method or second parameter (boolean) on the .scrollTo method for the scrolling amount to be relative to the current scroll position.
var scrollEl = instance.mainElement.querySelector('.lms_content_wrapper');
instance.scrollTo(scrollEl.scrollTop + 150);
Besides that your code is splendid and also great job for reserving the native scrolling.
opened by alexfain 1
Releases(v1.1.0)
v1.1.0(Feb 7, 2022)
Release v1.1.0
Added new methods
Added new callbacks
Added support for mobile callbacks
Improved performance for mobile
Code Update
Improved Documentation
Scroll Follow Tab is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 21.7Kb.