React how to select how much I have scrolled below

Asked
Active3 hr before
Viewed126 times

10 Answers

selectreact
90%

I have a website with different sections. I am using segment.io to track different actions on the page. How can I detect if a user has scrolled to the bottom of a div? I have tried the following but it seems to be triggered as soon as I scroll on the page and not when I reached the bottom of the div.,To evaluate whether my browser ha scrolled to the bottom of a div, I settled with this solution:,I found this to be more intuitive because it deals with the scrollable element itself, not the window, and it follows the normal React way of doing things (not using ids, ignoring DOM nodes).

you can use el.getBoundingClientRect().bottom to check if the bottom has been viewed

isBottom(el) {
   return el.getBoundingClientRect().bottom <= window.innerHeight;
}

componentDidMount() {
   document.addEventListener('scroll', this.trackScrolling);
}

componentWillUnmount() {
   document.removeEventListener('scroll', this.trackScrolling);
}

trackScrolling = () => {
   const wrappedElement = document.getElementById('header');
   if (this.isBottom(wrappedElement)) {
      console.log('header bottom reached');
      document.removeEventListener('scroll', this.trackScrolling);
   }
};
load more v
88%

The below image shows how my react-select options list is displayed.,I noticed the selection lists provided in the official react-select provided has a scroll bar. I have tried looking at the docs and the GitHub page but i still couldn't figure out a solution. ,Connect and share knowledge within a single location that is structured and easy to search.

You can play with the maxMenuHeight prop:

<Select maxMenuHeight={250} />
load more v
72%

 Pretag team - issue, fix, solve, resolve
65%

 Pretag team - issue, fix, solve, resolve
75%

TetheredSelect component that overrides Select's menu rendering:,I recently ran into this issue when using react-select components in a modal. For mobile the contents of the modal are scrollable. In this particular case, the Select was at the bottom of the content. Activating the Select made the container overflow and scrollable.,@oluckyman Having the same issue here! If I have other elements below the Select, I have no issues since there is plenty of space and I also reduce the height of the dropdown, but when the select is closer to the bottom of the page it pushed the main container.

.menu - outer - top.Select - menu - outer {
   bottom: 35 px!important;
   border - bottom - right - radius: 0 px!important;
   border - bottom - left - radius: 0 px!important;
   border - top - right - radius: 4 px!important;
   border - top - left - radius: 4 px!important;
}
load more v
40%

re-open menu, selected element is highlighted but not scrolled into view when menu is opened,select an option far down the list,select option 'silver' which is far down the list

<Select
  options={options}
  
  // wrong: new object is created. `options.indexOf(value)` fails to find the option index
  value={{
    value: selectedId,
    label: selectedName
  }}
/>

<Select
  options={options}
  
  // correct: `value` can be found in `options` array
  value={options[selectedIndex]}
/>
load more v
22%

Today we are going to learn, how to use JavaScript scroll event listener to track browser scroll position using hooks — React not so old new feature.,Because our hook is tightly bound to DOM we need to implement it inside an Effect hook. By default, effects run after every completed render, but you can choose to fire it only when certain values have changed.,It uses the default react hooks rendering lifecycle, which allows you to fully control its behavior and prevent unnecessary renders.

import {
   useRef,
   useLayoutEffect
} from 'react'

const isBrowser = typeof window !== `undefined`

function getScrollPosition({
   element,
   useWindow
}) {
   if (!isBrowser) return {
      x: 0,
      y: 0
   }

   const target = element ? element.current : document.body
   const position = target.getBoundingClientRect()

   return useWindow ?
      {
         x: window.scrollX,
         y: window.scrollY
      } :
      {
         x: position.left,
         y: position.top
      }
}

export function useScrollPosition(effect, deps, element, useWindow, wait) {
   const position = useRef(getScrollPosition({
      useWindow
   }))

   let throttleTimeout = null

   const callBack = () => {
      const currPos = getScrollPosition({
         element,
         useWindow
      })
      effect({
         prevPos: position.current,
         currPos
      })
      position.current = currPos
      throttleTimeout = null
   }

   useLayoutEffect(() => {
      const handleScroll = () => {
         if (wait) {
            if (throttleTimeout === null) {
               throttleTimeout = setTimeout(callBack, wait)
            }
         } else {
            callBack()
         }
      }

      window.addEventListener('scroll', handleScroll)

      return () => window.removeEventListener('scroll', handleScroll)
   }, deps)
}
load more v
60%

Using a third party library,In React, we have two choices to develop an infinite scroll.,Using a custom infinite scroll mechanism

1n pm install axios
load more v
48%

github.com/fisshy/react-scroll,Gitgithub.com/fisshy/react-scroll,React component for animating vertical scrolling

$ npm install react - scroll
load more v
23%

If specified as a value less than 0 (greater than 0 for right-to-left elements), scrollLeft is set to 0.,sLeft is an integer representing the number of pixels that element has been scrolled from the left edge.,If specified as a value greater than the maximum that the content can be scrolled, scrollLeft is set to the maximum.

// Get the number of pixels scrolled
var sLeft = element.scrollLeft;
load more v

Other "select-react" queries related to "React how to select how much I have scrolled below"