Thursday, September 15, 2022

Scroll methods and hooks in React

import React, { useRef, useEffect } from 'react';

const bottomRef = useRef(); // create Ref

useEffect(() => {    bottomRef.current.scrollIntoView({ behavior: 'smooth' });  }); // scroll bottom

https://stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react

window.scrollTo(0, document.body.scrollTop);

window.scrollTo(0, document.body.scrollHeight); // scroll to bottom

window.scrollTo({        top: 0,        behavior: 'smooth',      });

window.scrollTo(0, 0); // scroll to the top of the webpage

window.scrollTo(0, 780); // (x - horizontally, y - vertically)

el.scrollIntoView({ behavior: 'smooth' }

https://medium.com/@remoteupskill/different-ways-of-scrolling-to-a-dom-element-in-react-using-reacts-useref-hook-ec1afff82c43

https://bobbyhadz.com/blog/react-scroll-to-element-on-click

React.useEffect(() => {
window.scrollTo(0, 0);
}, []);

import { useEffect } from 'react'; // import to component

  useEffect(() => {    window.scrollTo(0, 0);  }, []); // inside component function before return

https://stackoverflow.com/questions/33188994/scroll-to-the-top-of-the-page-after-render-in-react-js

    document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });

    const scrollDiv = document.getElementById('contact').offsetTop;

    window.scrollTo({ top: scrollDiv, behavior: 'smooth' });

https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript

document.getElementById("link3").tabIndex = -1;

node.setAttribute('tabindex', '-1')

node.focus()

node.removeAttribute('tabindex')

No comments:

Post a Comment