Chrome displays the scrollbar on Windows but does not show it on Mac devices

As I work with this particular div that has an overflowX property set:

<div style={{ overflowX: 'scroll' }}>
   Some Content
</div>

It renders like this in Chrome on Windows:

https://i.sstatic.net/9nMsi.png

However, the appearance is different when viewed on Chrome for Mac: https://i.sstatic.net/OMBkV.png

In spite of both running the latest version of Chrome, the scrollbars show arrows unnecessarily on Windows even when there is no content to scroll. On Mac, the scrollbar only shows up when actually needed and without the undesirable arrows.

Is there a way to make the scrolling behavior consistent across both Windows and Mac versions of Chrome?

htmlcssgoogle-chromeoverflow

Answer №2

It may not be relevant to you now, but in case someone else could use this information, it's recommended to use overflowX: auto.

overflow: scroll will force the scrollbars to always appear, even if they are not necessary. However, this may not hold true for Mac users as the browser settings can affect how and when the scrollbars show up.

overflow: auto will only display the scrollbar when needed.

Answer №3

Perhaps you should experiment with using 

<div style="overflow-x: scroll;">
. It appears that you are utilizing OverflowX , which can also be applied in different scenarios, like Javascript.

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

How can I apply CSS toggles across the entire Ionic and Angular app?

Just dipping my toes into Angular, so please bear with me. How can I create a 'Night Mode' feature where users can switch between two CSS styles that apply across all views? For example: View 1: <ion-view> <ion-nav-bar></ion-n ...

javascripthtmlcssangularjsionic-framework

Extracting information from console output and displaying it in a table with angular2

https://i.stack.imgur.com/BMt6J.pngI am facing an issue with retrieving data from the console output and populating it into an HTML table. Can someone please assist me with this? Here is the HTML Code: <table class="table"> <tr> <t ...

htmlangulartypescript

Ways to display or conceal information depending on the dropdown choice

In my Angular project, I am dealing with a dropdown menu that is followed by some data displayed in a div element. component.html <select class="form-control" id="power" required> <option value="" disabled selected ...

javascripthtmlangulartypescriptangular-ng-if

Get the Best Width for CSS3 Printing

After running my code to window print the table (report), the output is displayed below: https://i.sstatic.net/chZ2b.png This is the code I used: CSS @media print { body * { visibility: hidden; } #reportArea, #reportArea * { visibility: ...

javascripthtmlcss

What is the best way to remove all elements within a div without deleting the div itself

I am struggling with deleting all the components inside a <div> without removing the actual <div> itself. This is what my HTML code looks like: <div id="home"> <label></label> <label></label> </div> Her ...

javascriptjqueryhtml

Multiple iframes in the template prevent Nuxt/Vue from reloading

I am utilizing Nuxt to configure the Vue app, which features an auto-reload function when files are modified. However, I encountered an issue when trying to create a page with multiple iframes containing other pages (.vue) from localhost. The auto-reload ...

javascripthtmlvue.jsnuxt.js

The functionality to clear the input search text upon clicking is malfunctioning

Why isn't this basic script working as expected? It has worked fine in the past, but now it's not functioning properly. <form name="form1"> <input type="search" placeholder="Search..." required="required" onfocus="if(this.value == &ap ...

javascriptcsshtml

Updating the background of a div in HTML through the power of JavaScript

I am having trouble changing the background of a DIV. I believe my code is correct, but it doesn't seem to be working. I suspect the error lies with the URL parameter, as the function works without it. Here is my code: <script language="JavaS ...

javascripthtml

How can you horizontally align a collection of elements using CSS?

I'm struggling to align a paragraph element with a group of button elements using jQuery and CSS. This is my issue: My goal is to have all these elements on the same horizontal line at the top of the screen to make the most of the pixel real-estate. ...

javascriptjqueryhtmlcss

In my development environment, the page does not have scroll functionality, but in the production environment, it is scrollable

Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the ...

javascriptcssvue.jsfrontendvuetify.js

problem when using directive $compile with encapsulating HTML

I'm currently working on developing a directive that, when declared like this: <input my-directive show-button-bar="true" ng-model="fooBar"\> It should generate the following HTML structure: <div on-toggle="toggled(open)" is-open="dpM ...

javascripthtmlangularjsdirective

Using Reactjs to bring the Sidebar Component to another page

As someone new to react, I am delving into self-teaching by working on projects. One task I have set for myself is to add a sidebar to a specific page on my website. Despite scouring through various resources, all the tutorials I find focus on adding a sid ...

javascripthtmlreactjsreact-bootstrapsidebar

Using WebRTC on a shared hosting environment (with SSH access) without the need for nodejs, ideally implemented in PHP

As I was exploring ways to integrate webRTC into a website that I am creating on shared hosting, I stumbled upon this GitHub repository by nielsbaloe. It has been incredibly helpful in establishing a basic connection. This particular code snippet appears ...

javascriptphphtmlwebrtc

"Enhancing digital experiences with HSLA effects and a stationary menu

Check out the code I've provided at this link: https://jsfiddle.net/kbvwpo76/ I'm trying to implement a fixed menu at the top of my page with an effect using hsla. You can see an example with random content in the link above. The problem I&apos ...

htmlcss

Why is it not possible to display the browser version with JQuery 2?

I'm fairly new to JavaScript and JQuery and I'm facing a specific issue. After including JQuery 2.1.4, my goal is to create a simple JQuery script that displays the browser name and its version. Following this tutorial on the official documenta ...

javascriptjqueryhtmljquery-2.0

VueJS radio button not triggering change event as expected

Looking for a way to manage when a new radio button is chosen in Vue? Below is the snippet of code I initially used: HTML File <div id="app"> <input type="radio" id="male" name="gender" value="m" ...

javascripthtmlvue.jsvuejs2dom-events

Insert fresh div elements chronologically using jQuery

When a user clicks on the ".u-post-button" button, this script is triggered. It retrieves the content of the comment input field and posts it to the server as a JSON object. The returned data containing the comment information is then appended after the ...

javascriptjqueryhtmljson

Python script to extract the link to a JavaScript file from the href tag in an HTML

Imagine a website similar to the following: This particular website contains links to pdf files referenced by an href tag in the page source, for example: <a href="javascript:$('form_cofo_pdf_view_B000114563.PDF').submit();">B000114563.PD ...

javascriptpythonhtmlwebweb-scraping

Selenium fails to identify the file location

After setting up Windows 10 and installing Windows Subsystem for Linux, I downloaded the chromedriver for Windows from the official website. The versions of Chrome and chromedriver are compatible, but when I try to webscrape using this code: driver = webd ...

pythonseleniumgoogle-chromeselenium-webdriver

Table of Wordpress posts

There has been a question on how to easily add tables to blog posts without having to use HTML. While some are comfortable inserting the code directly into the blog, others like my friend prefer alternatives that don't involve coding. Is there a simpl ...

htmlcsswordpresscontent-management-system