Verbergen der vertikalen Bildlaufleiste in allen Browsern

Question

Im folgenden Code möchte ich die Bildlaufleiste des ersten Blocks (div1) ausblenden, ohne Verwendung overflow Eigenschaft in allen Browsern.

Alle Vorschläge wären hilfreich.

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>

Answer 1

Es ist ein Hack, aber funktioniert. Die Idee ist, den Bereich der Bildlaufleiste außerhalb des Ansichtsanschlusses zu ziehen.

Die „Pull“ Größe annehmen, mit der Breite der Bildlaufleiste, in der Regel die breitere (unter 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>

Answer 2

versuchen, einen neuen Container div mit CSS hinzufügen:

.container { width: 100%;} 

Und nach innen setzen die div1, div2