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

Choosing2 - incorporate a style to a distinct choice

Let's talk about a select element I have: <select id="mySelect"> <option>Volvo</option> <option value="Cat" class="red">Cat</option> <option value="Dog" class="r ...

javascriptjqueryjquery-select2

Tips on effectively utilizing a value that has been modified by useEffect

Here is my current code: const issues = ['x','y','z']; let allIssueStatus; let selectedIssueStatus = ''; useEffect(() => { const fetchIssueStatus = async() => { const response = await fetch(&ap ...

javascriptreactjsreact-hooksuse-effect

Unable to adjust the top padding of the navbar to 0 pixels

Having recently started learning HTML and CSS, I am encountering an issue with the padding on my navbar. I am unable to get it to align with the top of the site as there is a persistent space between the navbar and the top. Below is my HTML code: <!do ...

htmlcssnavbarpadding

Apply CSS styling to the v-html output

I am trying to enhance the style of HTML code using a v-html but have been struggling with finding a working solution so far. Can anyone help me out? :( Below is my code snippet: Template : <div class="para" v-html="value" /> Script : exp ...

htmlcssvue.jssassvuejs2

Exploring the Power of Nested Routes in React Router v5.0

I'm currently facing a challenge with setting up routing in my react app. My goal is to have a common layout (including header and footer) for specific Auth routes such as /login, sign-up, forgot-password, etc... Additionally, I require another ...

reactjsreact-router

What is the method for sending a CSV file as Form Data through a REST API?

I am currently struggling with encoding my uploaded CSV file to Form Data. My approach is to pass the actual file to be processed on the backend using the post method of my API. However, I keep encountering an error message saying "TypeError: Failed to con ...

javascriptnode.jsvue.js

"TypeScript Static Classes: A Powerful Tool for Struct

In my TypeScript code, there is a static class with an async build method as shown below: export default class DbServiceInit { public static myProperty: string; public static build = async(): Promise<void> => { try { ...

javascripttypescriptstatic-methods

By utilizing // within the source of a <script>, one can efficiently reference external files without specifying the

Curious if anyone has come across any evidence, proof, or firsthand accounts of utilizing the traditional http/https JavaScript <script> hack: <script src="//someserver.com/js/script.js"></script> Have you faced any problems with this m ...

javascripthttpurlhttps

Tips on avoiding redirection when submitting a form

Upon making an AJAX call to a page, I receive a form with user parameters. This form is later submitted to a URL in order to create a session for the same user in advance. When that person visits the site, they should see their name displayed. To achieve ...

javascriptjqueryajax

Achieving Dynamic Alignment in CSS: How to Responsively Align a Div to the Width of its Parent Using Padding and Margins

My dilemma could not be clearer - I am struggling to properly align 4 divs within a width of 1150px (the maximum width of the content div). When resizing the screen, I want them to adjust accordingly: 4 in a row when possible, then 3 in the center, and so ...

cssresizeresponsive-designcss-float

What is the best way to check the validity of an if statement within JavaScript or AngularJS?

Here is a snippet of code that I have: $scope.changePassword = function () { sessionService.save($scope.sessionData); if(sessionService.account.newPassword == sessionService.account.currentPassword) { ...

javascriptangularjsunit-testing

Node.js server for Cross-Origin Resource Sharing

I'm brand new to Node.js and I'm trying to run some example code, but I keep encountering CORS issues. Server.js var http = require('http'); var io = require('socket.io'); server = http.createServer(function(req, r ...

javascriptnode.js

Establishing data using Vue.js

Apologies for my beginner question, but I have been struggling with a basic issue since yesterday and can't seem to find the solution. I am trying to populate my logs variable with a JSON object and display it in an array. Below is my HTML code : & ...

javascriptrendervue.js

Issues that could arise with a chat app

I am in the process of developing a website that will feature both personal and group chat capabilities, similar to those found on platforms like Facebook. Before I begin coding, I have a few questions that I would like to address. My current plan is to b ...

phpjavascriptajaxrdbms

Can you explain the distinction between a synchronous and asynchronous request in terms of their async parameter values (true/false)?

Can you explain the difference between setting async=false and async=true when utilizing the open method of the XMLHttpRequest? function GetXML() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new X ...

javascriptajax

Troubleshooting height adjustment for header and footer in CSS with dynamic content not functioning properly on Safari for macOS and Safari for iOS (jsBin)

I recently came across a solution by @RokoC.Buljan, which works perfectly on Chrome and Firefox. However, I encountered an issue with Safari where the content section does not scroll properly and the footer sticks to the bottom of the content, making it di ...

jqueryhtmlcsscross-browserresponsive-design

Configuring the correct loader in Webpack for Next JS is crucial for optimal performance

I'm encountering an issue while trying to load an HTML file with Next JS and html-loader. The error message I'm seeing is: Module parse failed: Unexpected token (2:2) You may need an appropriate loader to handle this file type, currently no loade ...

reactjswebpacknext.jswebpack-html-loader

Guide to seamlessly integrating form data into MySQL using JavaScript and HTML without redirecting the user from the current page

Having trouble inserting a new user into MySQL database? I've attempted using both jQuery and pure JavaScript, but it doesn't seem to be working. There's no response when I click on the submit button. Any ideas on what might be causing this ...

javascriptajax

What is the best way to use useCallback within loops?

I am currently exploring the concepts of memo and useCallback, and to better grasp them, I have created a simple example: import { memo, useCallback, useState } from "react"; import { Button, Text, TouchableOpacity, SafeAreaView } from "reac ...

javascriptreactjsreact-nativejsx

Issues with displaying video content and controlling the Bootstrap 5 video carousel

I have encountered an issue while coding a website for a friend's company. He requested a video carousel to be added to his existing site, so I incorporated links and scripts for Bootstrap in order to create a gallery for his products and a carousel t ...

htmlcssbootstrap-4bootstrap-5