简体   繁体   中英

Find the scroll position when scrolling

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM