Reactjs: How Can Access Property Of Scrollbox (horizontal Offset)

I have a scroll view in this fashion: a succession of views wrapped horizontally on a container.

Solution 1:

I am really not sure what you are looking for, but if you are looking for a way to control the scroll behavior for lazy loading in your app, so for e.g, if the user reach the bottom of the scroll you want to load more data, you can do it like this.

classScrollablePageextendsComponent {

  componentDidMount() {
    // Add Scroll Event After The UI Has Been renderedwindow.addEventListener("scroll", this.onHandleScrollEvent);
  }

  onHandleScrollEvent = () => {   
    const el = document.body;
    /*
     * el.scrollTop => This tells us how much a user has scrolled from up
     * Math.ceil(el.scrollTop) => returns value in whole rather then float
     */// this will start paginating when there is a difference of 100px from bottomconst bottomSpace = 100; 
    const bottomReachLimit = Math.ceil(el.scrollTop) + (bottomSpace); 
    if (el.scrollHeight - el.clientHeight <= bottomReachLimit) {
        // console.log('Bottom reached, starting pagination');// Do your magic here when reached bottom
    } else { 
       // console.log('Bottom not reached');
    }
  }

  render () {
     return (
       <div>
         {/* YOUR SCROLLABLE CONTENT HERE */}
       </div>
     );
  }

}

But if you want to control the Scroll behavior through code you can do something like this. The code written below will scroll to the bottom of the page on componentDidMount() but this gives you an idea how you can control the scroll behavior in an imperative way.

importReact, { Component } from'react';
 import { findDOMNode } from"react-dom";

 classScrollablePageextendsComponent {
    componentDidUpdate() {
      this.scrollToBottom();
    }

    scrollToBottom() {
       const el = findDOMNode(this)
       const scrollHeight = el.scrollHeight;
       const totalContainerHeight = el.clientHeight;
       const shouldScroll = scrollHeight - totalContainerHeight;

       const myInterval = setInterval(() => {
         if (shouldScroll > 0) {
           el.scrollTop = el.scrollTop + 70;
           if (el.scrollTop + el.clientHeight >= el.scrollHeight - 30) {
             clearInterval(myInterval);
           }
         }
       }, 20);
    }

    render () {
      return (
        <div>
           {/* YOUR SCROLLABLE CONTENT HERE */}
        </div>
      );
    }
 }

Share