CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
sergdenisov
sergdenisov

Reputation: 8572

Show scrollbar only by hover

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?

Upvotes: 0

Views: 3897

Answers (2)

Redy S
Redy S

Reputation: 372

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>

Upvotes: 0

Eric
Eric

Reputation: 18922

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.

Upvotes: 1

Related Questions