The method window.scrollTo() may encounter issues when used with overflow and a height set to 100vh

Suppose I have an HTML structure like this and I need to create a button for scrolling using scrollTo. However, I've come across the information that scrollTo doesn't work well with height: 100vh and overflow: auto.

What would be the best way to handle this situation?

NOTE: Just to mention, I am working on Reactjs, and my code in JSX file closely resembles the HTML setup below:

.big-container {
  height: 100vh
}

.small-container {
  overflow: auto;
  height: calc(100vh-300px)
}

.smaller-container {
  overflow: auto
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<body>
  <div class="big-container">
    <div class="small-container">
      <div class="smaller-container">
        <p>paragraphs here</p>
      </div>
    </div>
  </div>
</body>

</html>

javascripthtmlcssreactjs

Answer №1

I encountered a similar issue and found a workaround that worked for me.

In my situation, the <main> tag had an overflow-auto property. When using window.scrollTo, it was referring to the main window instead of the specific <main> tag. To address this, I decided to target the element directly:

const main = document.getElementsByTagName("main");
main[0]["scrollTop"] = 0;

Since I had a unique main tag, I could easily access it by its index. You can do the same by finding the element with a unique identifier and setting the scrollTop property to 0 to scroll to the top.

If you're facing a similar issue, try adding a class to the element containing the actual content:

onClick={() => { const element = document.getElementsByClassName("smaller-container");
      element[0]["scrollTop"] = 0; }}

:) Feel free to edit this solution for further improvements. Happy Coding!

Answer №2

It's functioning properly.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<body>
  <div class="big-container">
    <div class="small-container">
      <div class="smaller-container">
        <p>paragraph</p>
        <p>paragraph</p>
         // many more paragraphs
        <p>paragraph</p>
        <p>paragraph</p>
        
       <button onclick="scrollWindow()">
  Scroll
  </button>
    </div>
  </div>
 
</body>

</html>

.big-container {
  height: 100vh
}

.small-container {
  overflow: auto;
  height: calc(100vh-300px)
}

.smaller-container {
  overflow: auto
}

function scrollWindow(){
window.scrollTo(0,200)
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come a colon within a function's body does not result in an error in JavaScript?

During my coding journey, I encountered a situation where I was attempting to return an object from an arrow function. However, I noticed that the code snippet below was simply returning undefined. After some investigation, I determined that the curly br ...

javascriptarrow-functions

Exploring the use of Dividers within Material-UI's Tabs

When attempting to include a Divider or any other element that is not a Tab within Material-UI Tabs, DOM warnings may appear in the console. <Tabs ...> //... <Divider /> //... </Tabs> One workaround for this issue involves creatin ...

javascriptreactjsmaterial-ui

AngularJS: Unable to preserve the data

I'm currently working on an issue with saving updated functions using angularJS. I've managed to edit the data and update it on the database side, but the changes aren't reflecting on the frontend side unless I logout and login again. I need ...

javascriptangularjs

Manipulating the information pulled from an external PHP script that is currently being displayed

Although I don't consider myself a professional, I am determined to learn some web languages this summer to be able to turn my design ideas into prototypes. Currently, I am struggling to figure out how to manipulate elements that are being echoed bac ...

javascriptphpjqueryajax

Trouble with setting state in React using hooks

There appears to be an issue with the code below where the variable newName's state is not changing as expected. import React, { useState } from 'react' const App = () => { const [ persons, setPersons] = useState([ { name: & ...

reactjsreact-nativejasminereact-hooks

Combining React-Redux and Bootstrap: A sophisticated modal feature

Struggling with the distinction between components and containers when using Bootstrap's modal in React-Redux. Instead of repetitively creating modals, I aim to develop a React Component that encompasses a modal template. For clarification, here&apo ...

javascriptreactjsbootstrap-modalreact-redux

Develop a straightforward static webpage and set it up by installing and launching it using NPM

I am attempting to craft a straightforward HTML page that incorporates CSS/JS and utilizes npm. The objective is to construct a basic page that can be accessed by simply using "npm install" and "npm start". As an example, I will design a page with HTML, ...

htmlnode.jsnpmvue.js

What makes the transparent border colors on <tr> appear too dark?

For instance, take a look at this code: http://jsfiddle.net/WaJy7/ In my attempt to apply a semi-transparent border to every <tr> element, I've encountered an issue where the color of the border appears darker than intended for all rows except ...

htmlcss

"Having trouble with the React Material UI CardMedia video component? It seems to

Is there a way to have the video autoplay and repeat on this website? I can see the thumbnail, but no buttons to start or stop it. Click here for more information <CardMedia component="video" image='/video.mp4' title='title&apo ...

reactjsmaterial-ui

Craft dynamic SVG components using TypeScript

Looking to generate a correctly formatted SVG element using TypeScript: createSVGElement(tag) { return document.createElementNS("http://www.w3.org/2000/svg", tag); } Encountering an issue with tslint: Error message: 'Forbidden http url in str ...

javascriptsvgtypescripttslint

What steps can be taken to eliminate the 1-pixel line between the background and gradient?

How can I remove the line that appears between the block and the gradient background when zooming in, especially noticeable in Safari (After zooming a couple times, Cmd +) For more details, please refer to this jsfiddle link: http://jsfiddle.net/lokapujya ...

cssbackgroundlinear-gradients

What is the best way to allow someone to chain callback methods on my custom jQuery plugin?

My goal is to enhance the functionality of jQuery.post() by implementing a way to check the response from the server and trigger different callbacks based on that response. For instance: $("#frmFoo").postForm("ajax") .start(function () { showSpinner( ...

javascriptjqueryajaxcallback

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide

Currently, I am working on a circuit builder project using SVG for the components. In my HTML structure, I have an empty SVG tag that is scaled to full width and height. When I drag components from the toolbar into the canvas (screen), my JavaScript functi ...

javascripthtmlsvgdomxhtml

How to Add a Responsive Inset Transparent Overlay to Images without Using JavaScript?

My goal is to create a unique overlay effect on images of different sizes within a Pinterest-style fluid grid layout. The outer border width and inset 'border gap' will remain consistent, while the images themselves need to dynamically adjust. C ...

jquerycsstransparencyoutline

The function you are trying to access is not Random-js

Everything was running smoothly, but now there seems to be a glitch. Node version - 10.4 Error: var random = require("random-js")(); ^ TypeError: require(...) is not a function Code: var random = require("random-js")(); ...

javascriptnode.js

To modify the specified variables in data, I must deconstruct the object

Hello everyone, this is my debut post. I am seeking assistance with destructuring in order to update a variable that is defined within the "data" section. Below are the code snippets I have been working on using Vue. data: () => ({ id: '' ...

javascriptvue.jsobjectecmascript-6destructuring

What is the process for developing an Alphabetizer Program?

I have been working on this and I am having trouble getting the "alphabetized" version to display. I've tried a few things already, but I'm not sure what is missing or needs to be changed. Any advice on how to fix this would be greatly appreciate ...

htmlarraysalphabetical

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

htmlcssfirefox

What is the best method for loading multiple HTML files into a Div container?

Recently, I made the decision to improve the look of an online manual I have been working on for my company by incorporating Bootstrap. The manual is structured with a tree-view that contains titles linking to HTML files with information and CSS stylesheet ...

javascriptjqueryhtmlcss

Run a JavaScript function on a webpage loaded through an AJAX response

I need to trigger a function through an AJAX request sent from the server. The function itself is not located on the calling page. Here's an example of what I am trying to achieve: 1. PHP script being called: <script> function execute() { ...

phpjavascriptajax