Home/ Questions/Q 4190
Answered
Ghulam Nabi
Asked: 2022-12-22T11:52:36+00:00

Set width of scrollbar in JS to 8px

I need to amend the following code that is detecting the scrollbar width. It is opening a fullscreen menu by applying “overflow-y:hidden” to “html” when the menu is opened. This code should add a fake scrollbar to stop the content jumping to the right. Im also using a custom scrollbar that is 8px wide, so I think I just need to amend the code below to make the fake scrollbar 8px.

menuButton.addEventListener('click', () => {

   // get width before hiding scrollbar
   let oldWidth = document.documentElement.clientWidth;

   // toggle CSS class that sets overflow to hidden
   document.querySelector("html").classList.toggle("no-scroll");

   // get new width after hiding scrollbar
   let newWidth = document.documentElement.clientWidth;

   // set margin-right value equal to width of the scrollbar
   let scrollbarWidth = Math.max(0, newWidth - oldWidth);
   document.body.style.marginRight = <span>${scrollbarWidth}</span>px;
});
Share

1 Answer

  1. Best Answer

    To make the fake scrollbar 8px wide, you can simply update the value of the scrollbarWidth variable to 8.

    Here’s the updated code:

    menuButton.addEventListener('click', () => {

    // get width before hiding scrollbar let oldWidth = document.documentElement.clientWidth;

    // toggle CSS class that sets overflow to hidden document.querySelector(“html”).classList.toggle(“no-scroll”);

    // get new width after hiding scrollbar let newWidth = document.documentElement.clientWidth;

    // set margin-right value equal to width of the scrollbar let scrollbarWidth = 8; document.body.style.marginRight = ${scrollbarWidth}px; });

    • 0

Leave an answer

You must login to add an answer.

Need An Account,