隱藏所有瀏覽器中的垂直滾動條

在下面的代碼中，我想隱藏第一個塊（div1）的滾動條，而不在所有瀏覽器中使用overflow屬性。隱藏所有瀏覽器中的垂直滾動條

任何建議將有所幫助。

小提琴： 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>

來源

2017-09-15 Hitesh Misro

爲什麼你不會使用overflow屬性？我認爲這樣的東西:: - webkit-scrollbar {display：none;}例如 – SilverSurfer

檢查這一個https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-能夠滾動 –

@SilverSurfer @HD使用'webkit'前綴只適用於某些瀏覽器。 –

這是一個黑客，但工程。這個想法是將視圖端口外面的滾動條區域拉出來。

「拉」大小假設是與滾動條的寬度，通常是一個更廣泛的（在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>

來源

2017-09-15 08:51:18 felixmosh

嘗試添加的CSS一個新的div容器：

.container { width: 100%;}

而且裏面放DIV1，DIV2

來源

2017-09-15 08:49:22 user8611594

隱藏所有瀏覽器中的垂直滾動條

回答

相關問題