Show scrollbar only by hover

Question

I have scrollable list and want to show scrollbar only by hover, but I also want to have ability to scroll by first touch on list on mobile browsers (iOS, Android) — behaviour like list always has overflow-y: auto. I try to use this code (http://codepen.io/sergdenisov/pen/RPazyg):

HTML:

<ul class="list js-list">
    <li>Test Test Test Test Test Test Test Test Test</li>
    ...
    <li>Test Test Test Test Test Test Test Test Test</li>
</ul>

CSS:

.list {
    -webkit-overflow-scrolling: touch;
    padding: 0 30px 0 0;
    overflow: hidden;
    height: 300px;
    width: 300px;
    background: gray;
    list-style: none;
}

  .list_scrollable {
      overflow-y: auto;
  }

Javascript:

$('.js-list').on({
    'mouseenter touchstart': function() {
        $(this).addClass('list_scrollable');
    },
    'mouseleave touchend': function() {
        $(this).removeClass('list_scrollable');
    }
});

But scroll ability on mobile browsers activates only by additional tap on list before scrolling. Have any ideas?

Think about why you want to do this. Now think about the many people out there who actually use the scroll bar to scroll with. How will they scroll your content if there is no scrollbar for them to see? — Niet the Dark Absol, May 15 '15 at 14:50
Remember that **ALL** presentation code (HTML, CSS, JS) are **suggestions only**. A browser or sufficiently-skilled user is free to ignore any of your formatting. As @NiettheDarkAbsol said, what value does this add to your user? If you can't answer that, then don't do it. — BryanH, May 15 '15 at 14:56
@Vinc199789 what is the difference? `touchstart` triggers before `mouseenter` and `mouseover` usually on mobile browsers — https://patrickhlauke.github.io/touch/tests/results/. — sergdenisov, May 15 '15 at 15:08
@NiettheDarkAbsol yes, I thought about it. It's not my desire, but designer in my company wants this behavior. I'm looking for the possibility of it, maybe I won't do it this way. — sergdenisov, May 15 '15 at 15:14
Sometimes it's best to tell your designer "sorry, but that's not really possible in most browsers" - a little white lie and your future users will thank you ;) — Niet the Dark Absol, May 15 '15 at 18:58
Possible duplicate of [Make scrollbars only visible when a Div is hovered over?](https://stackoverflow.com/questions/8631799/make-scrollbars-only-visible-when-a-div-is-hovered-over) — rogerdpack, Jul 06 '17 at 20:32

Eric · Answer 1 · 2015-05-15T14:50:58.797

1

I would suggest you just add

  .list_scrollable {
      overflow-y: auto;
  }

as a media query for mobiles - thus making it always true. Or change your CSS as other answer(s) have suggested, making your JS-code obsolete.

edited May 15 '15 at 14:50

answered May 15 '15 at 14:49

Eric

18,532
2
34
39

While I don't agree with the practice of hiding the scrollbar like this, this answer is a very good way of handling it. – Niet the Dark Absol May 15 '15 at 14:50
What are a media query for mobiles? It's based only on screen width? It's not enough. I can get screen width = `1024px` on iPad in landscape orientation, it's also desktop screen width. – sergdenisov May 15 '15 at 15:20

Redy S · Answer 2 · 2015-05-16T17:39:49.797

Remember, on iOS device, overflow-y has to be scroll.

$(".list").on("touchstart touchend", function(){
  $(this).toggleClass("scroll");
})

.list {
  -webkit-overflow-scrolling: touch;
  padding: 0 30px 0 0;
  overflow: hidden;
  height: 300px;
  width: 300px;
  background: gray;
  list-style: none;
}

.list {
  /* Your CSS */
  overflow: hidden;
}
.list > li {
  max-width: 100%;
}
.list:active, .list:focus, .list:hover, .list.scroll {
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list js-list">
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
</ul>

Did you try it? It isn't working in iOS Safari — scrolling is blocked, http://codepen.io/sergdenisov/full/vOGomj/. — sergdenisov, May 15 '15 at 15:36
You can change `overflow-y` to `scroll`. It something known as bug in iOS. Or for better result, just give `overflow` not `overflow-y` and set `.list > li` `max-width` to `100%` — Redy S, May 16 '15 at 00:14
I don't need `overflow: scroll`, it'll be always show scroll on `:hover`, even items don't overflow list. And your solution isn't working again — http://codepen.io/sergdenisov/pen/rVLeeG. Please, always try it yourself before giving advice. — sergdenisov, May 16 '15 at 16:56
Thanks for your snippet, so now I get what you meant. See my updated answer with snippet, or this snippet http://codepen.io/redy/pen/aOZNpK — Redy S, May 16 '15 at 17:27
It works in the same way as example in my question. I need to activate scroll on **first touch**, not first tap. — sergdenisov, May 16 '15 at 17:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77979/discussion-between-sergey-denisov-and-redy-s). — sergdenisov, May 16 '15 at 18:01

Show scrollbar only by hover

2 Answers2