Disappearance of Chrome scroll bar without overflow-y condition

The live version of the page can be accessed here. It is divided into three main parts:

  • Left sidebar
  • Centered content
  • Right sidebar

To ensure that the right sidebar is scrollable, I have used 

overflow-y: scroll; right: -17px;
to hide the scrollbar. Both body and html elements have overflow-y: auto;. This setup eliminates the need for dual scrollbars on the page.

ISSUE: (specifically in Chrome versions 62 and 63)

In Chrome, different machines display two distinct styles for the scrollbar: Case 1 and Case 2.

For case 1, the scrollbar in the right sidebar is "absolutely positioned," causing the page to hide 17px of itself. In contrast, for case 2, the scrollbar is "relatively positioned," resulting in the page hiding 17px equivalent to the scrollbar width.

QUESTION

1) Why do scrollbars vary on Chrome across different machines running the same OS and browser version?

2) Is there a solution to address this discrepancy without relying on plugins? Consider that Windows users experience case 2, while MacOS users encounter either case 1 or 2.

javascriptjqueryhtmlcssgoogle-chrome

Answer №1

Have you ever wondered why scrollbars appear differently on the same operating system and browser version, but on different machines?

The variation in scrollbar appearance may be attributed to the system settings on macOS.

https://i.sstatic.net/fSikO.png

If you have the 'Always' option selected, it is likely that the scrollbar will push the page content aside, especially if a mouse is connected. Otherwise, it may exhibit the "absolutely positioned" behavior as mentioned. It's worth noting that Windows users might experience behavior similar to selecting 'Always'.

Is there a way to address this issue without relying on plugins? Particularly considering that Windows users encounter scenario 2 while MacOS users face either scenario 1 or 2?

In all honesty, concealing the scrollbar without offering an alternative indication of element scrollability may not be ideal from a user experience perspective. Nevertheless, should you wish to proceed with such a solution, you could potentially implement a JavaScript workaround for consistent functionality across various browsers and operating systems. For instance, by checking the offsetWidth and scrollWidth properties of the sidebar element to determine if the sidebar persists, you can dynamically toggle the presence of the .r-sidebar--r-padded class based on these values.

This approach is intended to provide a one-time execution solution that aims to deliver consistent performance regardless of browser or OS. My preliminary tests indicate successful implementation on macOS using Chrome under differing sidebar configurations.

Answer №2

Concealing the scrollbar from view may not be the most effective method of hiding it completely.

Is there a way to resolve this issue without using any external plugins?

Does this solution meet your needs?

.r-sidebar::-webkit-scrollbar { display: none; }

This code snippet will remove the scroll bar on all Chrome browsers. As it is specific to Webkit, it should function consistently across various operating systems assuming that the browsers are kept up-to-date.

Learn more here

Why do scrollbars appear differently on the same OS and browser version, but on different machines?

I don't have an immediate answer for this, but please provide additional information about the machines, operating system versions, and browser versions, and I'll do my best to offer further insights.

Answer №3

Content on the left side:

Implement the following CSS in the Scrollable div:

float: right;
margin-left: -15px;

Apply this to the inner divs:

.menu{   
 float: left;
}

This will effectively remove the scrollbar while keeping the content scrollable.

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

Swap out the text of one element with a different text content found within the DOM

I have a web app that features a template for displaying a list of books retrieved from the server using Python (Flask). The information about the books, including titles, IDs, and authors' names, is stored in the variable "books" which I then loop ov ...

javascripthtmljqueryajax

Automatically Trigger Setup Upon Download Completion [PHP]

When you go to https://www.google.com/chrome/browser/#eula to download Google Chrome, the setup file starts automatically after clicking the accept & install button. I am wondering if it is possible for me to open a file on the user's pc in the same w ...

phpgoogle-chromeautomation

The function JSON.parse(data) may result in an undefined value being returned

data = { "users": [ [{ "value": "01", "text": "ABC XYZ" }], [{ "value": "02", "text": "XYZ ABC" }] ] } var jsonData = JSON.parse(data); for (var i = 0; i < jsonData.users.length; i++) { var userlist = json ...

javascriptjqueryjson

Tips for Utilizing the Accurate Google Map Code within Jquery Tabs

Looking for assistance in properly integrating Google maps into jQuery tabs. I am trying to incorporate two maps into the project. One map to display the location and another map to provide directions. Encountering an issue with the code, as Firebug rep ...

jquerygoogle-maps-api-3maps

Generate a new web component using JavaScript

My HTML table looks like this: <table id = "rpttable" name = "rpttable"> <thead> Column Headers here... </thead> <tbody id = "rptbody" name = "rptbody"> data here <3 .... </tbody> </table> And in my ...

javascriptjqueryhtml

I have configured mongodb and mongoose, but whenever I attempt to insert data into the database, it does not get added successfully

My local environment is all set up properly, and I've confirmed that the database exists. However, when I try to add a new entry by typing in localhost:3000/pods/add?firstName='John', it doesn't seem to be working as expected. var expr ...

javascriptnode.jsmongodb

I seem to be stuck trying to figure out what's going wrong when receiving JSON data

I have spent hours researching on Stack Exchange and Google to gather different information. Here is what I have in guess.php: PHP header('Content-type: application/json'); get_rating($cleanMovie); json_encode(array($id)); The get_rating funct ...

phpjqueryajaxjson

Purge the cache of CSS and JavaScript in your browser

Is there a way to clear JavaScript and CSS cache in ASP MVC without having to clear browser history? ...

javascriptcssasp.net-mvc

Static placement reacting promptly

I am currently experiencing an issue where the content keeps scrolling to the right with the page when resized. I would like it to remain in the same position when resized. To help illustrate the problem, I have created a Codepen. It seems that the div con ...

htmlcss

Node.js: Experiencing HTTP request timeout issues lasting for over a minute

Using Node.js (version 0.10.28), I encountered an issue when making an http.request to my Ruby API for a large amount of data. The request seems to time out and return a 404 error after only 1 minute. Interestingly, when using other methods like wget or jQ ...

javascriptnode.jsexpressconnection-timeout

Enhance the appearance of div reflection with additional flair

Attempting to enhance a div with a reflection using the following CSS: CSS :: div.reflection { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); ...

jqueryhtmlcss

What is preventing the Date Picker in Selenium from accepting attribute values when using JavaScript for the Spice Jet application?

My implementation of JavaScript for the Date picker in Selenium is running successfully, however, the date is not being selected in the date picker. public class SpicJetBooking { static WebDriver driver; public static void main(String[] args) t ...

javascriptseleniumselenium-webdriverdatepicker

Modify the placeholder color for a disabled Input element to match the overall Mui theme design

I am struggling to change the color of the placeholder text in a disabled input field within my app's theme. Despite attempting to target the MuiFormControl, MuiInputBase, and MuiInput components in my theme.tsx file on CodeSandbox, I have not been su ...

javascripthtmlcssmaterial-uiplaceholder

Ways to extract a word from the source code of a webpage

<a class="thumb" href="/pe/Productos/Marca/Nike/Nike-Air-VaporMax-2020-FK/p/bt_NE_10677654" title="Nike Air VaporMax 2020 FK"> <img data-src="//media.marathon.store/products/h75/h1b/h00/9012525662238.jpg" alt="Nike Air VaporMax 2020 FK" class="laz ...

pythonhtml

Filter records using jQuery to narrow down results within a specific range of values

I am currently attempting to create a jQuery-based search engine using an XML file. I am specifically looking to retrieve properties with a price range between x and y. Despite utilizing the filter function, it seems that there may be an error in my code o ...

jqueryxmlajax

Utilizing ReactJs to Efficiently Parse JSON Data from API Requests

I am facing an issue with my React form where I need to pre-fill multiple fields using data retrieved from an async json call. Despite trying to set the button values based on attributes from the main json, the data is not available after loading. How can ...

javascriptreactjsjsonreact-hooks

Determine the quantity of characters available in a contenteditable field

I have implemented a directive that allows me to input editable content inside a tag Recently, I made modifications to include a character counter feature. However, I noticed that when I add line breaks, the character count increases erroneously. https: ...

javascriptangularjscontenteditable

I have created an Express.js application. Whenever I visit a page, I consistently need to refresh in order for the variables to appear correctly

Hello, I'm seeking some assistance. Despite my efforts in searching for a solution, I have not been successful in finding one. I've developed an application using Express.js that includes a basic form in jade. The intention is to display "Yes" i ...

javascriptjquerynode.jsexpress

Storing and Manipulating a JavaScript Object with Vuex: A New Perspective

Consider a hypothetical JavaScript object class like this: class Car { var engineTurnedOn = false; ... public turnEngineOn() { engineTurnedOn = true } } If I want to turn the engine on, should I create an action called 'turnEngineOn&ap ...

javascriptvue.jsvuex

The PHP content form is malfunctioning and not processing email submissions properly, resulting in the PHP code being

Following a tutorial, I attempted to create a basic contact form using PHP. As a beginner in PHP, I found the process fairly straightforward, but encountered some bugs in the code. Upon integrating the code on my website, clicking the submit button redirec ...

phpjqueryhtmlforms