CODEWITHSUNDEEP
javascriptjquerycss
Hitesh Misro
Hitesh Misro

Reputation: 3461

Hiding the vertical scrollbar in all browsers

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>

Upvotes: 0

Views: 70

Answers (2)

felixmosh
felixmosh

Reputation: 35473

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>

Upvotes: 1

user8611594
user8611594

Reputation: 11

Try to add a new container div with css:

.container { width: 100%;}

And inside put the div1, div2

Upvotes: 1

Related Questions