Showing the overflow scroll bar on both iOS and Android mobile devices

Is it possible to make the overflow scrollbar visible on mobile devices, specifically iPhones, Samsungs, and Safari browsers? The scrollbar is currently visible on desktops but not on mobile devices. I need a solution for this issue.

Here is the current code I am using.

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(77, 168, 65, 1); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(77, 168, 65, 1); 
}

Answer №1

Apple made the deliberate choice to conceal scrollbars in iOS until there is user interaction, a decision that was quickly adopted by Mac OS (including Safari) and Android.

As far as I know, only the end user has the ability to change this setting, which is system-wide.

The prevailing advice is to utilize a library to recreate scrollbars, as discussed in How do I get scrollbars to show in Mobile Safari. This is considered the most effective solution.

It is important to have a STRONG JUSTIFICATION before attempting to force scrollbars on mobile devices. Users are accustomed to not having them and they only serve to occupy unnecessary space on a limited screen.

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

Embedding PHP script within HTML code can enhance website functionality and

I am completely new to PHP and have never worked with it before. I'm interested in running a PHP script from within an HTML file on a Linux system. Can anyone guide me through the process? Below is the code from my HTML file: <!DOCTYPE HTML PUBLI ...

Get the Bootstrap download that includes CSS files rather than the LESS files

What is the reason behind bootstrap switching to only having LESS files instead of the traditional bootstrap.css file? Is there a way to download the bootstrap framework that includes the CSS files instead of just the LESS files? ...

Display images fetched using ajax requests

Looking to retrieve the image source path using the code below: $.ajax({ url: 'api/catalogs.php?action=fetchimg&CatalogId=' + d.CategoryId, type: 'GET', dataType: "json", success: function(response) { var path = respo ...

Retrieve data from a database using Ajax and PHP's `.load()` method

I am facing a dilemma with updating a value from a database ($learner->idnumber). The scenario involves a form that posts to process.php upon submission (which then edits the database). The challenge is updating the PHP database value $learner->idn ...

Unable to successfully append a unique character using jQuery

I need help with displaying special characters, specifically the degree symbol (°), in JavaScript/jQuery. Despite my efforts, it is not showing up correctly on the webpage. How can I fix this issue and ensure that the degree sign appears as desired? I ...

Managing and extracting specific information from a complex JSON dataset on an Android device

Scenario: I am fetching a large amount of JSON data from my backend server, specifically dealing with constantly updating movie information stored in a VPS. The initial JSON file I retrieve includes the release dates and IDs of the movies, for instance: ...

Select the picture to update the content of the text box

Seeking advice and guidance on a project. I have a variety of color icons and I want to set it up so that when someone clicks on a color icon, the name of the color is inserted into a hidden text field. The code for my hidden text field is as follows: &l ...

Utilizing nested flex containers with overflow-x property

I'm looking to set up a layout with 2 columns side by side. The first column should have a fixed width of 200px, while the second column should take up the remaining space on the screen. Additionally, I want the content in the second column to auto-sc ...

Disabling a button following a POST request

Is there a way to prevent multiple clicks on a button after a post request is made? I want the button to be disabled as soon as it is clicked, before the post request is executed. Below is an example of my code where the button is supposed to be disabled w ...

The application of CSS rule shadowing is not consistently enforced

Why does the text in the selected element not appear yellow like the "char_t" link above, even though they have the same class? It seems like it should be yellow based on the inspector, but it's not displaying as such on the actual page. This issue is ...

What is the best way to store my JSON output in a JavaScript variable?

In my jsonOutput.php page, the code looks like this: $response['imgsrc'] = $filename[1]; echo json_encode($response); When executed, it produces a JSON output like {"imgsrc":"071112164139.jpg"} My query now is, how can I make use of ...

I'm experiencing difficulty with linking to the Android library

What is the correct way to connect this library? https://github.com/FireZenk/AudioWaves The compile() method seems to be outdated, and using implementation() instead is causing it to not work properly. An issue occurred while trying to evaluate the root pr ...

Calculate the sum of a parameter in an array when a specific condition is met

I have an array that needs to be processed. var arr = [ {'ResId':123,'ResVal':4,'Date':'11/03/2015'}, {'ResId':123,'ResVal':8,'Date':'11/03/2015'}, {'ResI ...

Limiting the number of rows in a PHPexcel array

Is there a way to prevent the repcode from being empty if a specific name (array) is empty? I'm facing this issue with my excel report. Even when I only fill out 1 row in my form, the repcode is saved from 1 row to 10. Here is the current code: < ...

Choose a tag in order to connect to a different page when an event occurs in Rails

Working on my first complete stack rails application! I am trying to implement a select dropdown menu that will direct users to a specific show page within the app. Each option represents a different college with its own individual show page. I am struggl ...

The challenge of margin collapse

I am currently working on resolving a margin collapse issue. I am puzzled by the overlapping paragraphs and I really need to understand why this problem is happening. I suspect it may be a collapsing margin issue. Please take a look below: https://i.sta ...

Update the variables upon a click event following the completion of an AJAX request

Despite my efforts, I am unable to find a solution to the issue I am currently facing. To address this problem, I have created a script using PHP and jQuery that enables users to promote their "listings" on my website. When users visit a specific page, the ...

Guide to dynamically update table column information using jquery/ajax and store it in a MySQL database

Currently, I am utilizing the code below to modify a data table on the fly within an admin interface. It functions smoothly with just two columns, but as soon as I add more columns, I face issues editing and saving the data to MySQL. Can someone assist me ...

Refresh inventory of items using AJAX

Can someone assist me in finding where I made a mistake? I am trying to update the list of comments using ajax after successfully adding one, but instead, I end up seeing this page.https://i.sstatic.net/X7WZi.png The new comment is added to the database, ...

Ways to retrieve HTML content from various spans and incorporate the values as classes

Here is my custom HTML: <div class="box"> <ul class="fourcol first"> <li class="feature-item">Description: <span>0</span></li> <li class="feature-item">Description: <span>0</span></ ...