Maintain scrolling at the bottom with React.js

Question

Maintain scrolling at the bottom with React.js

Is there a way to make a div element increase in height through an animation without extending beyond the viewable area, causing the window to automatically scroll down as the div expands? I am looking for a solution that will keep the scroll position locked at the bottom of the page.

Note: This question pertains to React.

I have already searched countless times on Google and Stack Overflow for answers, but none of them seem to work or provide the specific guidance needed.

Check out the code here: https://github.com/coryb08/corydbaker. To run the code, use the command: npm install && npm start

javascript css reactjs

Answer 1

Answer №1

Your task is in React, where you can utilize JavaScript to ensure that your div remains scrolled to the bottom constantly.

class FullMenu extends Component {
  constructor() {
    super()
    this.state = {
      class: "",
      div: ""
    }
    this.scrollToBottom = this.scrollToBottom.bind(this);
  }
  componentDidMount() {
    setInterval(this.scrollToBottom, 20);
  }
  scrollToBottom() {
    var scrollingElement = (document.scrollingElement || document.body); /* provide your scrolling element with react ref */
    scrollingElement.scrollTop = scrollingElement.scrollHeight;
  }
  render() {
    return (
      <div id="FullMenu">
        {this.state.div}
        <div id="triangleDiv">
          <img
            className={this.state.class}
            onClick={() => {
              this.setState({ class: "bounce" })
              let that = this
              setTimeout(function() {
                that.setState({
                  class: "",
                  div: <div className="menuDiv" />
                })
              }, 1000)
            }}
            src={triangle}
            id="triangle"
          />
        </div>
      </div>
    )
  }
}

If you only want the window to scroll during animation, consider using react's CSSTransitionGroup and implementing clearInterval in the transitionEnd lifecycle hook to stop this behavior.

Answer 2

Your task is in React, where you can utilize JavaScript to ensure that your div remains scrolled to the bottom constantly.

class FullMenu extends Component {
  constructor() {
    super()
    this.state = {
      class: "",
      div: ""
    }
    this.scrollToBottom = this.scrollToBottom.bind(this);
  }
  componentDidMount() {
    setInterval(this.scrollToBottom, 20);
  }
  scrollToBottom() {
    var scrollingElement = (document.scrollingElement || document.body); /* provide your scrolling element with react ref */
    scrollingElement.scrollTop = scrollingElement.scrollHeight;
  }
  render() {
    return (
      <div id="FullMenu">
        {this.state.div}
        <div id="triangleDiv">
          <img
            className={this.state.class}
            onClick={() => {
              this.setState({ class: "bounce" })
              let that = this
              setTimeout(function() {
                that.setState({
                  class: "",
                  div: <div className="menuDiv" />
                })
              }, 1000)
            }}
            src={triangle}
            id="triangle"
          />
        </div>
      </div>
    )
  }
}

If you only want the window to scroll during animation, consider using react's CSSTransitionGroup and implementing clearInterval in the transitionEnd lifecycle hook to stop this behavior.

Answer 3

Answer №2

To achieve this effect using only CSS, you simply need to apply the following styling to the div:

display: flex;
flex-direction: column-reverse;

By doing so, the content within the div will be flipped and positioned at the bottom of the scroll.

Answer 4

To achieve this effect using only CSS, you simply need to apply the following styling to the div:

display: flex;
flex-direction: column-reverse;

By doing so, the content within the div will be flipped and positioned at the bottom of the scroll.

Maintain scrolling at the bottom with React.js

Answer №1

Answer №2

Similar questions

Using React and Material-UI: Implementing button functionality to call another class using hooks in the main App component

Creating a vertical scrollable container that spans the full height of the PDF document

Tips for choosing a visible element in Protractor while using AngularJS

Tips for implementing an automated date picker in Selenium using Node.js

Creating smooth and natural movement of a div element using Javascript (rotating and moving)

Mapping a bar chart on a global scale

The ng-include feature seems to be malfunctioning

Enable my textbox to interpret the html img tag

Changing the value of an object property (illustrated using a basic linked list)

Dynamic JavaScript Line Graph

unable to retrieve parent ID

What is the process for retrieving the address of the connected wallet using web3modal?

What is the best way to conduct a Javascript test using Jasmine?

Disregard the instructions upon loading the page

Utilize the power of jQuery to easily toggle visibility of an overlay

The challenge of using CSS Flexbox to position the logo with a margin-top

Transferring Data from Controller to HTML in AngularJS Version 1

Choosing the primary camera on a web application with multiple rear cameras using WebRTC

Managing data in React and JavaScript: Clearing fields upon successful sign up and redirecting to login page after receiving a 200 status code

What is the proper way to invoke a function that is part of a child component as a property in a React application?