Scroll Bars do not appear on mobile devices until they are scrolled

On this page, I have included a table with a maximum height. If the content exceeds this height, a custom scrollbar should appear. However, there is an issue on mobile devices where the scrollbar does not display until the content is scrolled.

Click here for image description

.scan-by-blocks .scan-by-block .legend {
  max-height: 120px;
  overflow-y: auto;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar {
  width: 8px;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-thumb {
  background-color: var(--grey-dark);
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px var(--grey-dark);
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

I am looking for a solution to ensure that the scrollbar remains visible on mobile devices even when the content is not scrolled.

cssbootstrap-4responsive-design

Answer №1

To fix the problem, update overflow-y: auto; to overflow-y: scroll; within the 

.scan-by-blocks .scan-by-block .legend
section. If the problem continues, try disabling any custom scrollbar styles and then attempt again.

Answer №2

At this point, I'm not entirely certain, but perhaps you could experiment with changing the overflow-y: auto to overflow-y: scroll?

.scan-by-blocks .scan-by-block .legend {
 max-height: 120px;
 overflow-y: auto;
 touch-action: pan-y;
 -ms-touch-action: pan-y;
 -webkit-overflow-scrolling: touch;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar {
 width: 8px;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-thumb {
 background-color: var(--grey-dark);
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 6px var(--grey-dark);
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-track {
 background-color: rgba(0, 0, 0, 0.1);
 border-radius: 5px;
}

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

Using CSS to align the position of a div with the last word position of an h4 element

Trying to figure out how to position a div at the end of an h4 text element has been challenging. When the h4 text is on a single line, it's easy to place the div correctly. However, things get complicated when the text spans multiple lines. In that c ...

htmlcsstextposition

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

javascriptjqueryhtmlcss

Invoke a function within the <img> tag to specify the source path

I have been attempting to achieve something similar to the following: <img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> This is my function: getIcon(status){ switch (status) { case 'Ongoing': ret ...

htmlcssangulartypescript

Shift the sideways movement of the triangle symbol

I currently have a main menu in the header with links, accompanied by a moving triangle that changes position as the user hovers from one page to another. While I want to maintain the dynamic movement, I am seeking a smoother transition effect similar to w ...

javascriptjqueryhtmlcss

Sliding out the sidebar menu with Jquery

Hey there! I'm currently working on implementing a swipe feature for the side menu bar. I have already added a click method in my code, but now I also need to incorporate a swipe technique. When the side bar is opened, I want to remove the inside im ...

javascriptjqueryhtmlcss

Container for grid template columns and responsive window in a single row

Imagine having around 250 divs with the class slider-item styled in a certain way. You have a responsive grid in CSS called A which arranges these divs as columns/items when the window resizes, with a minimum item width of 240px. Check out how it looks bel ...

javascripthtmlcsscss-grid

Is it possible to turn off the fallback color for bourbon radial gradients?

Is there a way to prevent the fallback from being applied when using the radial gradient mixin in Bourbon? I've consulted the documentation at , which states that the fallback is optional. However, no matter what I attempt, it seems that the primary ...

csssassmixinsfallbackbourbon

Can parameters be included in the HTML class attribute?

Is it possible to embed specific information into HTML elements, like images, without disrupting valid HTML markup? Would the following example be considered valid HTML? <img src="..." class="isearcher:tags(paris+hilton,gary+suneese)" > The idea is ...

jqueryhtmlcss

How come using float:right causes the div to float towards the left instead?

I am new to CSS and currently facing a problem with positioning a div (#inner) in the bottom-right corner of another div (#container). Initially, I used float: right;, but upon inspecting the Html, I noticed that the inner div is appearing in the bottom-le ...

css

What is the reason behind my styled component only displaying the final state in its className logs?

Here is my implementation using styled components with the version "@types/styled-components": "^5.1.26" and I'll provide you with an example of my code. // index.tsx import React, { useEffect, useState } from 'react'; i ...

javascriptcssreactjstypescriptstyled-components

How come the dark grey in CSS appears to be lighter than the standard grey hue?

JSBIN DEMO Could this be a mistake or is it a bug? Shouldn't the dark gray shade be darker than the default grey one? HTML <div class="lightgrey">Light Grey</div> <div class="grey">Grey</div> <div class="darkgrey">Dar ...

csscolors

The puzzle of Media Queries

I have been searching far and wide for a solution to my issue, which I believe is quite basic. Currently, I am struggling with it mentally. I am in the process of customizing a responsive template. This is uncharted territory for me when it comes to medi ...

htmlcss

Disable the 'bouncy scrolling' feature for mobile devices

Is there a way to prevent the bouncy scrolling behavior on mobile devices? For example, when there is no content below to scroll, but you can still scroll up and then it bounces back when released. Here is my HTML structure: <html> <body> ...

javascriptjqueryhtmlioscss

Tips for determining the full width of a webpage, not solely the width of the window

While we can easily determine the width of the window using $(window).width(); This only gives us the width of the window itself, not accounting for any overflowing content. When I refer to overflowing, I mean elements that extend beyond the visible view ...

javascriptjqueryhtmlcss

In the Bootstrap Grid system, all posts are aligned to the left side

I have created a gallery with Bootstrap in React.js. The posts are currently displayed using the bootstrap grid system, however, all posts appear on the left side and I am struggling to center them. Any ideas on how to achieve this? https://i.sstatic.net/ ...

htmlcssreactjsbootstrap-4

The speed at which Laravel loads local CSS and JS resources is notably sluggish

Experiencing slow loading times for local resources in my Laravel project has been a major issue. The files are unusually small and the cdn is much faster in comparison. Is there a way to resolve this problem? https://i.stack.imgur.com/y5gWF.jpg ...

javascriptcssperformancelaravel-5assets

When hovering over the sidebar, it smoothly slides out. (ideally using only CSS)

I've been spending my free time working on a website, but I'm struggling to figure out how to create a navigation similar to the one featured on FontShop's site: . I want it so that when you hover over their logo (or in my case, a blank rect ...

jquerycssnavigationhover

CSS3 pulsating circular Firefox bug

I am currently working on a CSS3 pulsing circle (animating scale to 1.1). To address a jumpy animation issue in Firefox, I have added a slight rotation. animation: button_pulse 2s infinite ease-out; transform: scale(1.1) rotate(0.1deg); Despite this adju ...

firefoxcss

What is the method to ensure background images are loaded with SSL from a different domain?

I run an online store and to improve performance, the images are hosted on a different domain. However, when I switch to secure mode using SSL on certain parts of the website, the background images disappear. Trying to view the image directly in the browse ...

css

Ways to display an icon with an underline effect upon hovering over text

I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using displa ...

cssangular