Visible scrollbars in div on mobile devices

Question

Violet_82 89 Posting Whiz in Training

12 Years Ago

Hello all, I wonder if you can help me with this. I wanted to create a page which, among the other things, has a div with a lot of text inside. Below this div there will be 2 buttons. When viewed on a mobile, the height of this div become fixed to fit the screen and the content inside becomes scrollable so that the two buttons below the div are always visible. That's all done with media queries and it works absolutely fine except for the fact that users will never know that the content in the div is scrollable because - I have just realized - mobile devices won't show scrollbars by default and in fact not even during the scrolling. I have done a bit of googling and nobody seems to suggest any pure CSS/HTML solution, maybe because there isn't. Is anybody aware of any CSS/HTML fix? If not what would be a good reliable and fairly easy to integrate plug-in that will achieve that?
Here is a screenshot from android, as you can see no scrollbars
7c2bb4a0609717892873040ed8df5e3b
Code-wise, it is a simple html page

 <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="contentWrapper">
<div class="contentConstrained">
<div class="content">                
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec magna dui. Proin eget lacinia augue. Quisque vel sagittis tortor. Duis fringilla magna sit amet ullamcorper posuere. Suspendisse suscipit interdum nibh. Nullam pulvinar porta nulla, gravida pellentesque orci. Aenean at mi massa. Nunc vel scelerisque lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus purus felis, porttitor ac elementum nec, tristique et odio. Fusce vel justo justo. Cras eu pretium arcu. Phasellus vel felis neque.</p>

<p>Praesent vehicula purus ullamcorper odio semper, aliquam pellentesque ipsum consectetur. Sed hendrerit laoreet urna, nec aliquet ante sollicitudin commodo. Nullam feugiat sapien vel cursus elementum. Pellentesque tincidunt purus vitae elementum vulputate. Pellentesque a venenatis velit, egestas vestibulum nibh. Aliquam quis lorem dignissim, ultrices mauris id, ultrices arcu. Aenean mattis justo nisl.

Cras condimentum egestas turpis non porttitor. Quisque et pulvinar purus. Nam ultrices laoreet erat ac tincidunt. Nullam blandit accumsan elit ut mattis. Nulla sem augue, tincidunt non aliquam quis, cursus at odio. Sed vulputate libero nulla, vel ultricies enim tristique tempor. Morbi commodo metus blandit augue condimentum, eget aliquam mi aliquam. Donec quis libero non velit vulputate cursus sed ac purus. Fusce justo sapien, scelerisque sit amet faucibus sit amet, rhoncus id velit. Aenean in semper turpis. Donec iaculis erat erat, vitae pulvinar dui placerat a. Etiam ullamcorper gravida mi, sed auctor urna tincidunt nec.</p>

<p>Donec rutrum odio vitae odio cursus, id blandit est molestie. Duis aliquet ligula vel odio pulvinar pharetra. Proin suscipit tortor a urna adipiscing pharetra. Aliquam in tempus tellus. Cras tempor tellus purus. Fusce adipiscing congue tortor, vitae ullamcorper arcu eleifend ut. Vestibulum luctus quam sit amet convallis scelerisque. Sed ultrices leo tortor, at lacinia lorem suscipit quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id est orci. Aliquam justo nunc, ultrices a tortor quis, fermentum cursus mi. Maecenas et risus vel velit tincidunt condimentum. Aliquam elementum elit purus, eget dictum arcu feugiat at. Nam tempor sollicitudin nulla rutrum interdum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec magna dui. Proin eget lacinia augue. Quisque vel sagittis tortor. Duis fringilla magna sit amet ullamcorper posuere. Suspendisse suscipit interdum nibh. Nullam pulvinar porta nulla, gravida pellentesque orci. Aenean at mi massa. Nunc vel scelerisque lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus purus felis, porttitor ac elementum nec, tristique et odio. Fusce vel justo justo. Cras eu pretium arcu. Phasellus vel felis neque.

Praesent vehicula purus ullamcorper odio semper, aliquam pellentesque ipsum consectetur. Sed hendrerit laoreet urna, nec aliquet ante sollicitudin commodo. Nullam feugiat sapien vel cursus elementum. Pellentesque tincidunt purus vitae elementum vulputate. Pellentesque a venenatis velit, egestas vestibulum nibh. Aliquam quis lorem dignissim, ultrices mauris id, ultrices arcu. Aenean mattis justo nisl.

Cras condimentum egestas turpis non porttitor. Quisque et pulvinar purus. Nam ultrices laoreet erat ac tincidunt. Nullam blandit accumsan elit ut mattis. Nulla sem augue, tincidunt non aliquam quis, cursus at odio. Sed vulputate libero nulla, vel ultricies enim tristique tempor. Morbi commodo metus blandit augue condimentum, eget aliquam mi aliquam. Donec quis libero non velit vulputate cursus sed ac purus. Fusce justo sapien, scelerisque sit amet faucibus sit amet, rhoncus id velit. Aenean in semper turpis. Donec iaculis erat erat, vitae pulvinar dui placerat a. Etiam ullamcorper gravida mi, sed auctor urna tincidunt nec.

Donec rutrum odio vitae odio cursus, id blandit est molestie. Duis aliquet ligula vel odio pulvinar pharetra. Proin suscipit tortor a urna adipiscing pharetra. Aliquam in tempus tellus. Cras tempor tellus purus. Fusce adipiscing congue tortor, vitae ullamcorper arcu eleifend ut. Vestibulum luctus quam sit amet convallis scelerisque. Sed ultrices leo tortor, at lacinia lorem suscipit quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id est orci. Aliquam justo nunc, ultrices a tortor quis, fermentum cursus mi. Maecenas et risus vel velit tincidunt condimentum. Aliquam elementum elit purus, eget dictum arcu feugiat at. Nam tempor sollicitudin nulla rutrum interdum.
</p>
</div>
<div class="buttonsContainer">
<button>Button 1</button>
<button>Button 2</button>
</div>
</div>
</div>
</body>

</html>

And css here:

.contentWrapper{
    width:100%; 

    background-color:pink;
}
.contentWrapper .contentConstrained{
    width:900px;
    margin:0 auto;
}

.contentWrapper .content{
    background-color:red;
    padding:20px;

}
.buttonsContainer{
    margin-top:10px;
}
@media (max-width: 767px) { 
    .content{
        height:200px;
        width:260px;
        overflow:auto;
        /* overflow-y:auto; */
        margin:0 auto;
    }
    .contentWrapper .contentConstrained, .contentWrapper , .buttonsContainer{
        width:300px;
    }
    .contentWrapper {
        margin:0 auto;
    }
}

html-css user-interface web-design

3 Contributors
5 Replies
317 Views
2 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by patk570

Dani AI

Generated 9 Months Ago

A short, practical note that complements the thread: mobile browsers commonly hide inactive scrollbars, and the WebKit scrollbar pseudo-elements are non‑standard and won’t give a persistent, cross‑device native scrollbar on phones. That’s why forcing overflow alone (as suggested) often looks like it “works” but gives no visible affordance on iOS/Android; inline scroll areas also create discoverability problems on mobile. (developer.mozilla.org)

Two lightweight solutions that work well in practice:

Visual signifier (recommended): add a small bottom “fade” or a chevron that indicates there’s more to scroll, and hide it when the user reaches the bottom. This keeps native scrolling (no scroll-tampering) and is simple to add. Example (match the gradient color to your container background):

/* container keeps native scrolling */
.content {
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum */
}

/* subtle bottom fade to indicate more content */
.content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  transition: opacity .18s;
}

/* hide when at bottom */
.content.at-bottom::after { opacity: 0; }

(function(){
  const el = document.querySelector('.content');
  if (!el) return;
  function update(){
    const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
    el.classList.toggle('at-bottom', atBottom);
  }
  el.addEventListener('scroll', () => requestAnimationFrame(update));
  window.addEventListener('resize', () => requestAnimationFrame(update));
  update();
})();

This pattern (fade/chevron) is a common UX affordance for scroll hints. (conffab.com)

Plugin approach: if you need a visible rail/thumb across platforms, pick a modern library that preserves native scroll behavior (so touch/momentum and accessibility aren’t broken). Examples: SimpleBar and OverlayScrollbars—both style a visible track while keeping native scrolling; test them on real devices and with assistive tech. (npmjs.com)

Accessibility & final tips: enable -webkit-overflow-scrolling: touch for smoother iOS momentum; add role="region" and an aria-label for screen readers; make sure your persistent action buttons meet touch-target guidelines (44×44 CSS px) per WCAG. Test on real phones — frameworks like Bootstrap help layout but won’t force visible native scrollbars by themselves. (webdocs.dev)

(Bringing this back to the thread: ’s arrow idea is a solid, small-JS enhancement; ’s framework suggestions help layout but won’t change mobile scrollbar visibility — use the fade/arrow + a11y hints for the most reliable result.)

All 5 Replies

patk570 42 Newbie Poster

12 Years Ago

try this:

overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
overflow: scroll;

Edited 12 Years Ago by patk570

Member #46692

12 Years Ago

Opt for an small responsive framework.

Skeleton would be a good choice. Bootstrap for a more comprehensive but heavier alternative.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

patk570 42 Newbie Poster · Answer 1 · 2014-01-28T20:18:22+00:00

Bootstrap CSS makes a great framework. I love the responsivness of it. I am building my current website based on it now. They have so many options for usage. Bootstrap Css Webpage

Violet_82 89 Posting Whiz in Training · Answer 2 · 2014-01-29T10:43:33+00:00

thanks guys, yes I thought about a responsive framework myself, thanks

patk570 42 Newbie Poster · Answer 3 · 2014-01-29T16:47:23+00:00

Another option would be to add an arrow that is fixed to the bottom of the div that show that there is more and disappears when they reach the bottom of the text. For that I would use jquery...

Visible scrollbars in div on mobile devices

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers