0

How do I show scrollbar to a div element which has property overflow:scroll. I want to show scrollbar on top, bottom, left and right side if possible. I want scrollbar to be appear on all devices windows, mac, iphones and android.

Ali
  • 3,373
  • 5
  • 42
  • 54
Ujwol Shrestha
  • 27
  • 7

1 Answers1

0

You'd have to use javascript to have that behavior. Using only overflow: hidden would not suffice. I'd recommend capturing the scroll event and then changing the scroll value of another like so:

$(function(){
    $(".wrapper1").scroll(function(){
        $(".wrapper2")
            .scrollLeft($(".wrapper1").scrollLeft());
    });
    $(".wrapper2").scroll(function(){
        $(".wrapper1")
            .scrollLeft($(".wrapper2").scrollLeft());
    });
});

http://jsfiddle.net/duez1pd1/

You could repeat the same process for the vertical scroll bars.

kochai
  • 49
  • 4
  • Thank you for taking time to answer my question. I want scrollbar to be visible all the time no matter what device I use. is it possible? Right now can't see scrollbar on ios devices unless I scroll somthing. – Ujwol Shrestha Jun 12 '17 at 22:09
  • Unfortunately I don't think it is possible to add those natively. You could create your own scroll bars that would capture scroll events and then move along the x / y axis as the user scrolls through the element, but that would be a bit hacky. You can read it further here https://stackoverflow.com/questions/3845445/how-to-get-the-scroll-bar-with-css-overflow-on-ios and gracefully degrade the scrollbars on iOS devices. – kochai Jun 12 '17 at 23:16