Hiding the vertical scrollbar in all browsers

Question

In the below code, I want to hide the scrollbar of the first block (div1) without using overflow property in all the browsers.

Any suggestions would be helpful.

Fiddle: http://jsfiddle.net/mvn1ngby/12/

$('#div1').scroll(function(){
    $('#div2').scrollTop( $('#div1').scrollTop() );
});

$('#div2').scroll(function(){
    $('#div1').scrollTop( $('#div2').scrollTop() );
});

div.outer {
    display:inline-block;
    width:150px;
    height:320px;
    border:1px solid black;
    overflow-y:auto;
}

div.outer > div {
    height:3000px;
}
#div1 div {
  width:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" id="div1">
    <div>
    </div>
</div>
<div class="outer" id="div2">
    <div>
    </div>
</div>

Why you wont use overflow property? I think with something like this ::-webkit-scrollbar { display: none;} for example — SilverSurfer, Sep 15 '17 at 08:43
check this one https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll — HD.., Sep 15 '17 at 08:44
@SilverSurfer @HD using `webkit` prefix would work for only some browsers. — Hitesh Misro, Sep 15 '17 at 08:46
@HiteshMisro Is just and example for webkit like Chrome or Opera, he can put the rest of browsers — SilverSurfer, Sep 15 '17 at 08:47
Is this the effect you want? http://jsfiddle.net/ync1akbz/1/ — sol, Sep 15 '17 at 08:47
Oh, I found this, there isnt option for webkit scrollbar in firefox https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox — SilverSurfer, Sep 15 '17 at 08:48
@ovokuro thats close but scrolling isn't working on the left block by using that `overflow` property. — Hitesh Misro, Sep 15 '17 at 08:50
Do you want to control the scrolling yourself that is why you are hiding the scrollbar? You can't actually escape the fact the scrollbar appear because the child has more height than its container and hide the scrollbar without using `overflow` unless you make that `child element position absolute` then control its position to behave like it is scrolling. — masterpreenz, Sep 15 '17 at 08:51
@HiteshMisro ah ok I see... Maybe Felix Mosheev answer will help. — sol, Sep 15 '17 at 08:53

score 1 · Answer 1 · answered Sep 15 '17 at 08:49

1

Try to add a new container div with css:

.container { width: 100%;}

And inside put the div1, div2

answered Sep 15 '17 at 08:49

user8611594

11
1

felixmosh · Accepted Answer · 2017-09-15T09:15:39.447

It is a hack but works. The idea is to pull the area of the scroll-bar outside of the view port.

The "pull" size suppose to be with the width of the scroll bar, usually the wider one (on Windows)

$('#div1').scroll(function() {
  $('#div2').scrollTop($('#div1').scrollTop());
});

$('#div2').scroll(function() {
  $('#div1').scrollTop($('#div2').scrollTop());
});

div.outer {
  display: inline-block;
  overflow: hidden;
  border: 1px solid black;
}

#div1>div,
#div2>div {
  height: 3000px;
}

.scrollable {
  width: 150px;
  height: 320px;
  overflow-y: auto;
}

#div1 {
  margin-right: -25px;
  padding-right: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="scrollable" id="div1">
    <div></div>
  </div>
</div>
<div class="outer">
  <div class="scrollable" id="div2">
    <div></div>
  </div>
</div>

Hiding the vertical scrollbar in all browsers

2 Answers2