How to display HTML on top without altering the viewport in React?

Question

How to display HTML on top without altering the viewport in React?

I am trying to display a component <Top /> above another component <Bottom /> in React. The code structure is as follows:

...
[top, setTop] = useState(false);
[bottom, setBottom] = useState(true);
...

return (
<div>
 top && (<Top />)
 bottom && (<Bottom />)
 <button onClick = { () => setTop(true) } />
</div>
)

The issue I am facing is that when the user clicks the button to render <Top /> while seeing <Bottom />, there is an "instant scrolling" effect that changes the viewport position to <Top />.

Is there a way to render the component without changing the current viewport position?

Should I consider using CSS or javascript techniques to achieve this?

html css reactjs render viewport

Answer 1

Answer №1

If you want to maintain the scroll position, consider using the useEffect hook along with a reference to the specific element. Below is an example:

useEffect(() => {
  // store the current scroll position of the bottom element
  let currentPosition = bottomElementRef.scrollTop // initial run
  if (top) {
    // update the scroll position when a top element is added
    bottomElementRef.scrollTop = currentPosition // second run for top
  }
},[top])

I hope this explanation assists you in resolving the problem.

Answer 2

If you want to maintain the scroll position, consider using the useEffect hook along with a reference to the specific element. Below is an example:

useEffect(() => {
  // store the current scroll position of the bottom element
  let currentPosition = bottomElementRef.scrollTop // initial run
  if (top) {
    // update the scroll position when a top element is added
    bottomElementRef.scrollTop = currentPosition // second run for top
  }
},[top])

I hope this explanation assists you in resolving the problem.

Answer 3

Answer №2

Give this a shot:

try {
  return (
    <div>
      {header && <Header />}
      {footer && <Footer />}
      <button onClick={() => setHeader(true)} />
    </div>
  );
} catch (error) {
  console.log('An error occurred: ' + error);
}

Answer 4

Give this a shot:

try {
  return (
    <div>
      {header && <Header />}
      {footer && <Footer />}
      <button onClick={() => setHeader(true)} />
    </div>
  );
} catch (error) {
  console.log('An error occurred: ' + error);
}

How to display HTML on top without altering the viewport in React?

Answer №1

Answer №2

Similar questions

Hover over CSS sprite

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

Modifying the image height in a column using Bootstrap and JSON data

Positioning icon/image beside the input box

Generating PDFs from websites using code

Having trouble understanding the odd behavior in IE7. Suddenly seeing a scrollbar appear when hovering

Borders in my CSS/HTML table design

Creating a Timeless Banner with the Magic of `background:url()`

What is it about the phone screen that makes media content so captivating?

Mastering CSS: Optimizing Div Placement Across Sections

Creating an Interactive Menu System with Nested Options in Angular 2

Creating a button that seamlessly adapts to all browsers

What is the reasoning behind setting the perspective to 1000 for carousel items in Bootstrap?

Applying CSS transformations to scale up a div within its parent body

What is the best way to add a textfield within an image?

Switch Button Hyperlink in HTML/CSS

Choose or deselect images from a selection

Tips for Placing a Div in a Precise Location

Navigating to a particular div using a click event

Decrease the border-radius shorthand mixin, deactivate the variable