I'm using this library for the scroll https://kingsora.github.io . How do you know that the element is completely scrolled? I can nyyati only the initial point where scroll = 0, but how do you know that the element is scrolled to the end?
var instance = $("#road-scroll")
.overlayScrollbars({
callbacks: {
onScrollStop: function(e) {
scrollLeft = e.target.scrollLeft;
if (scrollLeft === 0) {
btnL.removeClass("btn-active");
}
if (scrollLeft > 0) {
btnL.addClass("btn-active");
}
}
}
})
.overlayScrollbars();
Answer:
var instance = $("#road-scroll")
.overlayScrollbars({
callbacks: {
onScrollStop: function(e) {
scrollLeft = e.target.scrollLeft;
var scrollInfo = instance.scroll();
let max = scrollInfo.x.max;
if (scrollLeft === 0) {
btnL.removeClass("btn-active");
}
if (scrollLeft > 0) {
btnL.addClass("btn-active");
}
if (scrollLeft >= max) {
btnR.removeClass("btn-active");
}
if (scrollLeft < max) {
btnR.addClass("btn-active");
}
}
}
})
.overlayScrollbars();
The answer should be actually <instance>.scroll.max.x
and not x.max
as per @Андрей Охотников's answer:
const scrollBar = $(jsScrollPageContainer).overlayScrollbars({
className: "os-theme-dark",
callbacks: {
onScroll: function(e) {
const scrollInfo = scrollBar.scroll();
const max = scrollInfo.max.x;
const scrollLeft = e.target.scrollLeft; // same as `scrollInfo.position.x`
const scrollTop = e.target.scrollTop; // same as `scrollInfo.position.y`
// other logic
}
}
}).overlayScrollbars();
Complete object for reference:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.