Scrollbar not displaying in Chrome when using overflow-y: scroll

I'm currently creating a list of organizations on the left side of this page:

To create this list, I am using <span> tags that are linked to the corresponding map.

However, I'm facing an issue - the scroll bar doesn't show up in Chrome but it does in Firefox and Safari.

Any suggestions?

UPDATE:

It appears that this problem is specific to Mac OS.

SOLUTION:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
javascriptjqueryhtmlcssgoogle-chrome

Answer №1

In reference to the question posed on Stack Overflow about CSS and always showing the vertical scroll bar, it was mentioned that OSx Lion has a feature where scrollbars are hidden when not in use to give a more sleek appearance. However, this can lead to confusion as users may not realize a div has a scroll feature.

A solution provided in CSS is:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Answer №2

I have noticed the presence of a scroll bar. For Mac users, it is advisable to ensure that scrollbars are consistently displayed

https://i.sstatic.net/9076e.png

Answer №3

Include the following in your CSS file:

.list::-webkit-scrollbar {
    -webkit-appearance: scrollbartrack-vertical;
}

Alternatively, you can use:

.list::-webkit-scrollbar {
   -webkit-appearance: scrollbarthumb-vertical;
}

Answer №4

Currently, I have Windows 8 installed on my system with Google Chrome version 48.0.2564.97, and everything is functioning flawlessly. You can view the highlighted section in the image below:

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

Answer №5

Currently I have Crome Version 48.0.2564.97 m installed on my device.

Everything is functioning properly as expected. I will update the style to overflow-y:auto just in case there isn't enough content to display, ensuring that no scroll bars are shown.

https://i.sstatic.net/NFyGa.jpg

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

Resolving the daunting Error [ERR_REQUIRE_ESM]: What is the solution?

Error [ERR_REQUIRE_ESM]: The require() function cannot be used to import the ES Module located at C:\Users\Admin\Desktop\Server\node_modules\formidable\src\index.js from C:\Users\Admin\Desktop\Ser ...

javascriptnode.jsexpressformidable

Incorporate a PHP script into JavaScript using AJAX or alternative methods

I have been trying to complete a page on my website for the past couple of hours with the following objectives in mind. When a button is clicked, the following actions should occur: A download link should appear (done - working) The mySQL table should be ...

javascriptphpajax

Create and transmit an array of JSON objects

I need help with defining and sending a JSON object array. While I've managed to define a single JSON object, convert it into a string, and send it, I'm stuck on how to do the same for an array of objects. It seems like there might be a simple so ...

asp.netjavascriptjson

Exploring the power of JSON and JavaScript: A guide to efficiently reading lists through JSON manipulation

I am facing an issue where I am unable to read an object using the method below function loadData(){ $.getJSON('data.json', function(data) { $.each(data, function(Index, entry) { mem = new user(entry.name, entry.age, entr ...

javascriptjqueryjson

Trouble with retrieving dates in ISO format

My collection stores the date of birth field in ISO format, for example: ISODate("1980-01-01T20:20:19.198Z") However, when I use a date time picker on my HTML page, it displays the date like this: 01/01/1980 Unfortunately, when querying for the date of ...

javascriptnode.jsangularjsmongodb

What is the best way to retain all form filters after reloading the view in Laravel 5.4?

The form below is the one I have in view: <form class="form-inline" method="POST" action="{{route('dsp.report')}}"> @csrf <!-- {{ csrf_field() }} --> <div class="col-sm-2 form-group"> ...

javascriptphplaravel

Delivering XML in response to a webmethod call

While working with an ajax PageMethod to call an asp.net webmethod, I encountered an issue when trying to pass a significant amount of XML back to a callback javascript function. Currently, I am converting the XML into a string and passing it in that form ...

javascriptajaxxmlvb.netwebmethod

Submitting FormData with an attached file

Currently, I am utilizing jQuery to submit form data with a file attachment. The server is a jQuery restify. However, the issue I am encountering is that when I retrieve the image file (referred to as cocktail_image_file_input), it comes through as a strin ...

jqueryajaxnode.jsrestifyform-data

The error message "Unexpected token var Node.js" means that there is a syntax error

Currently, I am dealing with Node.js and attempting to present a chart that is created from coordinates in a txt file uploaded to the server. However, I am facing an issue where everything works perfectly when I upload the file on the web page except for t ...

javascriptnode.jsexpress

When attempting to open a .pdf file in a new tab using React and Express, a void message appears on the screen

I have a situation where I am attempting to open a .pdf file in a new tab from the server's file system using Express, React, and MySQL. The problem arises when, upon clicking the "See" button, the displayCV function is triggered, a new tab opens, but ...

javascriptreactjsexpresspdfreact-context

Using dojo.dnd.moveable in a fixed position setting

I have been attempting to use a Dojo moveable with a fixed position on the browser window. Unfortunately, whenever I try to move the div using the mouse, the position automatically changes to absolute. Is there a way to keep the div fixed in its position? ...

javascriptcssdojodrag-and-drop

Timing of Bindings in AngularJS

In my setup, I have a controller that calls a service to retrieve a list of categories: $scope.enquiryCategories = CategoryServices.listCategories(); The service then fetches this data from an external API: listCategories: function () { return $http({ ...

javascriptangularjs

Bidirectional enumeration in TypeScript

I am working with an enum defined as: enum MyEnum { key1 = 'val1' key2 = 'val2' } However, I am unsure how to create a SomeType implementation that fulfills the following requirements: Function: const myFunction = (param: SomeT ...

javascripttypescripttypesenums

Slide down on the closest element with a specified class when clicked

I am currently working on a grid layout where each column contains an image, name, title, and a written description. Right now, the written descriptions (p.sub-team-description) are hidden using display:none; I am looking to add some animation so that wh ...

jqueryslidedownclosest

Getting access to the CSS class selector within the HTML document in the application

Upon examining this snippet of HTML: <html> ... <iframe> #document <html> ... <div className='change-me'></div> ... </html> </iframe> </html> This iframe has be ...

htmlcssreactjs

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

let count = 0; while (count < 4) { $('#container').append("<div><input type='textbox' class ='left' id='left-${count}'/><input type='textbox' class ='right' id=' ...

javascriptjqueryhtml

Trick to Use Custom Fonts in Email Clients with CSS and HTML

With certain email clients not supporting web fonts, most solutions involve using a backup font like Arial that is compatible with the client. However, the issue is that the default web font is needed specifically because it is a barcode font. Are there a ...

htmlcssoutlookhtml-emailwebfonts

Tips on avoiding duplicate selection of checkboxes with Vue.js

Recently delving into vue.js, I encountered a challenge with multiple checkboxes sharing the same value. This resulted in checkboxes of the same value being checked simultaneously. How can this issue be resolved? var app = new Vue({ el: '#app&apo ...

javascriptvue.js

Selenium 'execute_script' unable to locate element using CSS selector, despite success in devtools console with querySelector

When loading the page on Chrome manually and running a querySelector function in the console, the correct element is returned. However, when using driver.execute_script with the same querySelector function, it returns None. from selenium import webdriver f ...

javascriptpythonselenium-webdriver

Unable to execute PHP files using Node.js

I have been working on a Node.js web application hosted on a Heroku server. The issue I am facing is related to an AJAX request in my JavaScript code that sends a GET request to a PHP file on the server. Interestingly, this request works perfectly when I r ...

javascriptphpnode.js