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

Having trouble getting Google to show breadcrumbs in search results

I've been trying to implement schema.org's breadcrumb microdata in order to have Google display my breadcrumbs in search results. However, when I check with Google's structured data testing tool, the breadcrumb is not showing in the search r ...

htmlbreadcrumbsschema.orggoogle-rich-snippets

Angular Fire: The $on method is missing and causing an error stating that undefined is not a function

I am currently attempting to log my Firebase data to the console, but I keep encountering an error stating undefined is not a function. Below is the full error message: TypeError: undefined is not a function at Object.childAdded (http://localhost:9000/scr ...

javascriptangularjsfirebaseangularfire

Delete property from object in JavaScript

Looking for a solution to replace the content of an object with another in an array of objects without passing the reference directly. The challenge is not knowing what values my function will pass, so I can't use them as keys to avoid copying the re ...

javascriptvue.jsvuejs2

The Angular Date Pipe is displaying an incorrect date after processing the initial date value

Utilizing Angular's date pipe within my Angular 2 application has been beneficial for formatting dates in a user-friendly manner. I have successfully integrated API dates, edited them, and saved the changes back to the API with ease. However, an issue ...

javascriptangulartypescriptdate-pipe

Parsing JSON data on the client side in an ASP.NET application

I am currently working with JSON data that looks like this: "Table":[ { "AF":2000.00 "RegionNumber":1 "RegionName":"Black Sea" }, { "AF":100.00 "RegionNumber":1 "RegionName":"Black Sea" }, { "AF":15000.00 "RegionNumber":2 "RegionName":"Ista ...

javascriptjson

The AJAX call to retrieve data from a file dynamically is experiencing issues

I am currently trying to use AJAX to dynamically retrieve data from my PHP page and display it on my HTML page. However, I am running into some issues with getting it to work properly. You can view the page here Here is the snippet from the HTML Page wher ...

javascriptjqueryajax

Enhance vue.js by adding your own custom filters

I am currently working with Vue.js integrated with Laravel using Elixir and Browserify. I am trying to create custom global filters, each in their own separate file. Despite following the documentation, I am encountering an issue where I receive the follow ...

javascriptbrowserifyjavascript-frameworkvue.jslaravel-elixir

What is the best way to personalize material-ui V1 components throughout my application by establishing a theme?

When working with material-ui v0, I discovered that it was easy to customize themes by adding properties to themeOptions for each component. This file: https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js (from the master branch), a ...

reactjsmaterial-ui

When the enter key is pressed, the form will be submitted and the results will be displayed in a modal window without

Behold, my unique form! It lacks the traditional <form></form> tags. <input id="query" name="query" style="font-size: 18pt" id="text" data-email="required" type="text" placeholder="Search Here from <?php echo $row['no']."+"; ?& ...

javascriptjqueryhtmlajaxforms

Changing a string-stored array into a List object in JavaString

Here is a messy nested list that I need to convert into a list of numbers: nested_list = [ ["[63]"], ["[61]"], ["[7]"], ["[63]"], ["[80, 18]"], ["[80, 43, 18, 20]"] ] I know it's ...

javascriptarraysstringlist

Issues with Jquery Cycle not functioning as expected

I've been delving into the world of Jquery, attempting to create a basic SlideShow, but unfortunately, the desired effect isn't happening... Here's the layout of my HTML file: <!doctype html> <html lang="en"> <head> ...

javascriptjquerygoogle-chromeslideshow

How can I render just one event instead of all events when using the eventRender callback function?

I am currently working on adding an event to my calendar using a JSON format with specific attributes like id and start time. Here is what I have tried so far: $('#calendar').fullCalendar('renderEvent', my_event); $('#calendar& ...

javascriptjqueryfullcalendar

Steps for stopping the sass --watch function on a specific folder

Successfully got my SASS up and running with the help of fantastic documentation available everywhere. The guide I followed was http://sass-lang.com/guide. sass --watch myfolder/css Running a specific command worked like a charm, enabling every change in ...

cssmacosnpmsass

What's the better approach for creating Maps and Sets in ES6: relying on a compiler or leveraging syntactic sugar?

It has always baffled me why we are unable to write ES6 Maps in the following way: new Map({ ['ArrayAsKey']: {foo:bar} }) Is there a workaround for this limitation? Or perhaps a technique that enhances the experience of utilizing these mode ...

javascriptecmascript-6

The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari. To solve the issue, I need to remove the following code: .nav { position: fixed; } However, I still ...

javascripthtmlcss

Ensure that the HTML input element only accepts positive values, including decimal numbers

I need to build an input field that only accepts positive numbers, including decimal values. Leading zeros are not allowed, and users should not be able to paste invalid values like -14.5 into the field. Here is my current implementation: <input type= ...

javascripthtmlreactjsvalidationevent-listener

Exploring the Response Object in Express JS: A Comprehensive Guide

I'm currently using Express version 4.13.4. My goal is to access and examine the res object. However, when I try to use console.log() on it, the output is too lengthy to display properly in a command window. I attempted to utilize jsonfile to save i ...

javascriptjsonexpress

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Below is the code snippet I am currently using to change the color based on the character's name: I encountered an error indicating that the li tag was not properly closed, although it appears to be closed. However, there seems to be an issue during ...

javascripthtmlcssvue.js

Include buttons in the HTML template once JSON data has been received

I am working on a feature to dynamically add buttons to the DOM using JSON data fetched from an API when users visit the site. Although I have successfully implemented the function to retrieve the data, I am facing challenges in adding these buttons dynami ...

javascriptjqueryhtmljsonangularjs

html displaying dynamic data in a table

As a beginner in coding, I am attempting to create a dynamic table. The first column is working fine with each new cell being added to the top. However, when I try to add columns, they fill from top to bottom instead of mirroring the first column. I want m ...

javascripthtml