Ensure that the sidebar automatically scrolls to the bottom once the main content has reached the bottom

I am facing an issue with a sticky sidebar that has a fixed height of calc(100vh-90px) and the main content. The sidebar contains dynamic content, which may exceed its defined height, resulting in a scrollbar. On the other hand, the main content is lengthy. Is there a way to automatically scroll the sidebar to the bottom when the main content reaches the footer? While setting the sidebar's height: auto resolves the issue, I would like it to have the exact screen height. Any suggestions on how to achieve this would be highly appreciated.

The basic HTML structure is as follows;

<nav></nav>
<div class="wrapper">
<div class="main"></div>
<div class="sidebar></div>
</div>
<footer/>

The CSS applied to the sidebar is;

position: sticky;
top: 90px;
height: calc(100vh-90px);
overflow-y: scroll;
javascriptcssreactjs

Answer №1

Utilize the footerInView function to determine the position of the footer.

Scroll the sidebar to the bottom using sidebar.scrollTop.

const footerInView = () => window.scrollY + window.innerHeight > document.querySelector('footer').offsetTop
const sidebar = document.querySelector('.sidebar')
document.addEventListener('scroll', () => {
  if (footerInView()) sidebar.scrollTop = sidebar.scrollHeight
})
html {
  scroll-behavior: smooth;
}

.sidebar {
  background: black;
  color: white;
  width: 400px;
  position: sticky;
  top: 90px;
  height: calc(100vh - 90px);
  overflow-y: scroll;
}

footer {
  height: 100px;
  background: black;
}
<nav></nav>
<div class="wrapper">
  <div class="sidebar">
    <div style="height:2000px;display: flex;align-items: end;">sidebar bottom</div>
  </div>
  <div class="main" style="height: 2000px;"></div>
</div>
<footer>
  footer
</footer>

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

Make sure to call the loader function in React Router only when there are path params present

I'm currently implementing the new React Router, utilizing loader functions to fetch data based on the loaded element. My goal is to have certain APIs called regardless of the route, with additional APIs triggered for specific routes. However, I&apos ...

reactjstypescriptreact-routerreact-router-dom

Tips for extracting a website's dynamic HTML content after AJAX modifications using Perl and Selenium

When dealing with websites that utilize Ajax or javascript to display data, I'm facing a challenge in saving this data using WWW::Selenium. Although my code successfully navigates through the webpage and interacts with the elements, I've encounte ...

javascriptajaxperlseleniumweb-crawler

Toggle switch unable to reset upon reloading the page

Issue with Toggle Switch Not Resetting on Page Reload I am encountering a problem with a toggle switch I implemented from the W3schools example (link here). Unlike in the W3schools editor where it resets its state upon reload, my toggle switch remains in ...

htmlcsscheckeduncheckedtoggleswitch

Error: SyntaxError - Issue with the AJAX request

When attempting to retrieve the HTML of a page using the following ajax request: $.ajax({ type: 'GET', dataType:"jsonp", url: link, success: function(response){console.log(response)}, ...

javascriptjqueryajax

How can one prevent the reactjs status page from being displayed?

I am currently developing an e-commerce platform using the MERN stack. When I send a request from React to Node and it fails, the page displays the status code along with the error message. Is there a way to prevent this issue? View image description her ...

node.jsreactjsmongodb

Leverage the power of Reactjs to add hover effects to a mapped

I am facing a challenge in styling the ListItem on hover. The issue arises when the list is dynamically generated, causing all list items to change style simultaneously when hovered over. How can I target only one element for styling? Below is the code sni ...

javascriptcssreactjsmaterial-ui

Attempting to create a login and registration form

Hello, I am attempting to create a form that can generate new user accounts and passwords. These values should be stored from the input tag when the user clicks on the register button. Unfortunately, I am encountering an issue where clicking the register ...

javascripthtmlcss

Utilize jQuery to style the background of the webpage, while excluding the Modal element when using Bootstrap

I'm currently working on implementing foggy.js () to create a blurred background effect for Bootstrap's Modal. While I've successfully blurred all elements in the background, the Modal Popup itself is also appearing blurry. So my question is ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to link optional and undefined paths in AngularJS routing?

When it comes to AngularJS routing, I have a question. How can we combine the use of a star (*) to match paths with slashes and a question mark (?) to match optional paths? Specifically, I am looking to match both /admin/tasks and /admin/tasks/arbitrary/pa ...

javascriptangularjsroutes

Attempting to use Selenium in JavaScript to download a file with a new element called 'TransitionRejection'

I am looking to streamline the process of downloading multiple files from a website. To achieve this, I navigate through several pages to obtain the file IDs using selenium and a perl script. Since selenium does not have a built-in download function and u ...

javascriptperlseleniumdownload

Is there a way to simultaneously modify several data variables within a Chart.js label?

I'm currently working on dynamically updating a line chart with two data entry points using the variable name "data." Take a look at the code snippet below: var lion = new Chart(ctx2, { type: "line", data: { labels: ["Apr", "May", ...

javascriptchart.js

Is it possible to customize the width of text color alongside a progress bar?

My Bootstrap 4 Website contains the following HTML code snippet: <div class="container"> <div class="row"> <div class="col-md-6 mx-auto> <h2>Example heading text</h2> <h6>Example subh ...

javascriptjquerycssbootstrap-4

Passing form data from Next.js to the parent page

I recently developed a basic web page called "Lucky Number" pages/lucky.js import finder from '../../hooks/use-finder' import NumberForm from '../components/number-form' export default function LuckyNumber() { const { data } = finder ...

reactjsnext.js

Issue in Next.js/React app with pm2: Unexpected symbol '<' in code

Exploring the world of next.js and React is an exciting journey for me. After creating a basic application, I am eager to host it using pm2 and Apache. Upon executing npm run dev within the next project directory, the server launches successfully, showcas ...

node.jsreactjsnext.jspm2

Having trouble transitioning from Curl to Axios in Node.js? Encountering issues when trying to make a curl request using the provided certificates, resulting in ECONNRESET or

I've been struggling to make a successful curl request in Axios (Node.js) without any luck. A typical working curl request I use (can't provide exact details as the API is private) is like this: curl --cacert server.pem --cert client.pem:123pas ...

javascriptnode.jscurlaxiosssl-certificate

two adjacent DIV elements with matching heights

Currently, I am in the process of developing an internal web page with a wrapper DIV structure based on recommendations from an online tutorial. Within this wrapper, there are different sections including a header, mainnav, content, sidenav, and footer. Th ...

htmlcss

What is the correct way to route requests to /api/ressource in a production environment?

In my development environment, I have set up a webpack dev configuration where my front-end server runs on port 8080 and my backend server runs on port 3000. Here is how I configured my webpack dev server: proxy: { '/api': 'http://localh ...

javascriptnode.jsexpresswebpack

There are three checkboxes, one of which is independent of the others and requires jQuery to not consider it part of the collection

Initially, I crafted a query that perfectly met the business requirement until there was a change of heart. Uncheck checkbox if checked with jquery The implementation of this code was flawless $('input[type="checkbox"]').on('change' ...

javascriptjqueryhtmlcheckbox

Continuously flowing chain of replies from a series of queries using RxJS

I am exploring the world of RxJS and seeking guidance from experienced individuals. My goal is to establish a synchronized flow of responses, along with their corresponding requests, from a stream of payload data. The desired approach involves sending ea ...

javascriptreactive-programmingrxjs

Retrieve information from an array within a blockchain smart contract

My smart contract factory has the ability to deploy another smart contract. Within the factory contract, there is a specific function: address[] public migrations; ... function getMigrations() public view returns (address[] memory) { return migr ...

node.jsreactjsnext.jssolidity