Hide the scrollbars on the sidebar

I'm attempting to recreate a sleek scrollbar that caught my eye on the website . To achieve this, I need to have a screen larger than 955px in order to display the sidebar. However, when my sidebar overflows in the y direction, it causes an additional scroll bar to appear alongside the page's scroll bar. This is not the desired outcome. What I actually want is for the sidebar to remain fixed at the bottom of the screen, similar to how it behaves on the mentioned website. Here's a snippet of my current code:

.sidebar{
    display: block;
    background-color: #1056b1;
    width: 30%;
    height: 100%;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
  }

 .content-on-the-right{
    margin-left: 31%;
  }

Could anyone offer insight into how I can address this issue using vanilla JavaScript or ReactJS, or potentially utilizing CSS if possible?

javascriptcssreactjs

Answer №1

Although there may be a more effective method, I believe this will help you get started on achieving your goal. Let's assume that your website's sidebar is identified by the id of sidebar.

Once the window has loaded, you can utilize an EventListener to trigger a function that assesses the elements' offsets. From there, you can customize as needed:

window.addEventListener("scroll", HandleScroll, false);

function HandleScroll() {
  var sidebar = document.getElementById('sidebar');
  var sidebarHeight = document.getElementById('sidebar').offsetHeight;
  var winHeight = window.innerHeight;

  var offset = sidebarHeight - window.pageYOffset;

  if (offset < winHeight) {
    sidebar.style.position = "fixed";
    sidebar.style.bottom = 0;
  } else {
    sidebar.style.position = "static";
  }

}

Take a look at my JSFiddle demonstration for further clarification.

P.S. I understand that the name of the function leaves much to be desired, but I'm a bit exhausted... feel free to rename it for clarity.

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

Request to api.upcitemdb.com endpoint encountering CORS issue

This code may seem simple, but for some reason, it's not working as expected. What I'm trying to achieve is to call the GET API at: I want to make this API call using either JavaScript or jQuery. I've attempted various approaches, but none ...

javascriptjqueryhtmlajaxxmlhttprequest

Potential causes for Chrome to send duplicate requests

In my nginx server logs, I have the following entries (IPs and paths altered for illustration purposes): 101.101.101.101 - - [15/Apr/2020:14:46:03 +0000] "GET /item/download-file/ready/5e971e290107e HTTP/2.0" 200 142940 "https://example.com/referer" "Mo ...

javascriptgoogle-chromehttp

Passing a selected option in a select box to another website is achievable using JavaScript

I'm still learning JavaScript and I would like to have a user be directed to another page when they select an option from a dropdown menu. Any suggestions on how to accomplish this? ...

javascripthtml

Retrieving visual information from Google Street View entity

Looking for a solution to extract imagery from the Google Street View panorama within a web page? In my program, I navigate specific routes using Google Street View's javascript API controlled by an embedded Java applet on the same page. I am seeking ...

javascriptgoogle-mapsappletcapture

What could be causing the CSS and HTML connection to fail?

I am currently working with Flask on the Atom editor to build a website. Despite specifying the correct path for the CSS file in the link, every time I load the page, it appears without any styling. I have attempted changing the paths multiple times with n ...

pythonhtmlcssflaskatom-editor

I am looking to enhance my array of objects by implementing a filter. It is important that the filter does not allow for duplicate checkboxes with the

My website : https://i.sstatic.net/myJAf.png On the left-hand side of my webpage, there is a set of checkboxes with some repeated names that I don't want. For example, "Rice" is repeated twice but I only want it to display once. When checking the Ri ...

javascriptangulartypescriptcheckboxfiltering

Striving to implement a dynamic expand and collapse animation feature for a card in ReactJS

I'm attempting to create an expand and collapse animation effect on a card without relying on bootstrap or any external libraries. I have tried adding a transition property but it doesn't seem to work when the button is clicked. Here is the comp ...

cssreactjs

"Unlocking the power of React and Redux: The key to accessing the most recent store state upon

I am intrigued by the best practices for rendering components and how to effectively rerender them to ensure they reflect the updated store. Currently, in the project, there is a store that listens for react-router and stores the current location. Store ...

reactjswebpackreduxreact-reduxwebpack-2

"Implementing a click event on a dynamically generated element is triggering the event for all of its parent elements

I have a task to generate a dynamic table with data retrieved from the server. Each row in the table contains a tag that I am trying to link to a click event. The code snippet below demonstrates how the dynamic table is created: function ProcessResponse ...

javascriptjqueryasp.net-mvc

Disordered block elements

I am having trouble centering a div in my footer. When I try to center it, the div ends up floating on top of the footer instead. Here is the link to the codepen. footer { text-align: center; background-color: grey; position: fixed; bottom: 0; width: 100 ...

htmlcss

Is there a way to modify the appearance of a particular element in ng-repeat?

On my website, I am using ng-repeat to display various dish postings. I want to trigger a modal to open when I click on a dish, showing the specific data for that dish. To achieve this, I'm assigning each dish a modal div with a unique ID (dish-$index ...

javascriptangularjsangularjs-ng-repeat

Generate a vector3 with a defined direction

I have a challenge at hand where I am looking to create a 2D flow field in three.js based on a working example I found in p5.js. The original source code for reference is as follows: var inc = 0.1; //Increment of noise var yoff = 0; var scl = var; //Scale ...

javascriptvectorthree.js

What is the best way to eliminate leading and trailing spaces from a text input?

I'm currently working on troubleshooting a bug in an AngularJS application that involves multiple forms for submitting data. One of the issues I encountered is that every text box in the forms is allowing and saving leading and trailing white spaces ...

javascriptjqueryangularjstrimremoving-whitespace

I keep encountering a "map is not a function" error while working with React JS

I am attempting to retrieve and display data from a MySQL database using Spring Boot and React JS in a table format. However, I am encountering an error while trying to display the information. componentDidMount(){ const currentUser = AuthService.g ...

javareactjsspring-bootrest

What is the reason behind the error "Uncaught SyntaxError: Malformed arrow function parameter list" when using "true && () => {}"?

When the code below is executed: true && () => {} it results in an error message stating: Uncaught SyntaxError: Malformed arrow function parameter list Why does this happen ? Update: I am aware that wrapping the function in parentheses reso ...

javascriptnode.jslogiclogical-operators

How to effectively create factories in AngularJS

I stumbled upon this angularjs styleguide that I want to follow: https://github.com/johnpapa/angular-styleguide#factories Now, I'm trying to write my code in a similar way. Here is my current factory implementation: .factory('Noty',functi ...

javascriptangularjs

Using React JS to dynamically render items using the map method

I would like to include submodule names inside a div as well. Here is the API data: "predefined": [ { "id": 2, "mainModule": "bonding", "description": "some ...

reactjs

In the game of rock paper scissors, the icons become unclickable once you achieve a score of 5

I have created a Rock Paper Scissors game where the score resets if either the user or computer reaches 5 points, but I want to prevent any further play after hitting 5. Currently, the game displays a message and reloads after 5 seconds, during which tim ...

javascripthtmlcss

Tips for transferring information from Django to React without relying on a database

Currently, I am in the process of developing a dashboard application using Django and React. The data for the user is being pulled from the Dynamics CRM API. To accomplish this, I have implemented a Python function that retrieves all necessary informatio ...

javascriptpythonreactjsdjangoweb

Error: Issue with parsing integer in JavaScript

I'm in the process of developing a dice game that involves rolling two dice and determining the sum. The goal is to display the running total next to the dice. However, I'm encountering an issue where NaN (Not a Number) is being displayed. Here i ...

javascripthtmlnanparseint