Q

是否可以在瀏覽器的滾動條上覆蓋DIV？

html
css

2015-02-09 102 views 3 likes

3

有沒有什麼方法在瀏覽器的滾動條上覆蓋DIV？是否可以在瀏覽器的滾動條上覆蓋DIV？

我意識到滾動條可以隱藏使用overflow: none，但我想實際上把DIV放在滾動條上而不是隱藏它。

2015-02-09 Nate

+2

可以隱藏滾動條，然後自己創建一個滾動使用JavaScript，然後在此之上疊加了'div' 。請不要這樣做。你不想把任何東西放在滾動條上。 – MattDiamant 2015-02-09 21:21:15

A

回答

3

不，您不能在視口外呈現內容。但是，您可以刪除瀏覽器的滾動條並替換您自己的滾動條，從而提供更大的靈活性。

請參閱this question瞭解更多信息。

2015-02-09 21:21:29 isherwood

+0

@ manuc66，我不明白這與這個主題有什麼關係。 – isherwood 2017-08-01 14:48:27

0

不可以，除非您編寫自己的滾動條實現。

編寫自己的滾動條實現的缺點包括缺少對其他設備的測試和支持。

但是，this library和this question可能會有所幫助。

2015-02-09 21:22:10 qaisjp

0

如果您在Google文檔中查看文檔，這與他們顯示自己的滾動條的操作非常相似。

如果您使用overflow:none隱藏滾動條，那麼您可以在頁面的右側自由創建自己的元素。您不會「覆蓋」瀏覽器的滾動條。相反，在使用overflow:none隱藏它之前，您的滾動條將與瀏覽器的位置相同。

您將深入瞭解模擬滾動條行爲的有趣挑戰，包括拖動，點擊頁面上/下區域等，以及移動內容作爲迴應。

2015-02-09 21:23:56 AaronLS

3

如果該滾動不是爲<html>元素，您可以將div放在滾動條上。這裏是使另一個div的滾動條溢出div的代碼。

HTML：

<body> 
    <div id="content"> 
     Code goes here instead of BODY 
     <div class="test"></div> 
    </div> 
    <div class="overflow">CONTENT FOR OVERFLOW ELEMENTS</div> 
</body>

CSS：

html, body { 
    margin:0; 
    padding: 0; 
} 
#content { 
    background: lime; 
    overflow: auto; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.overflow { 
    position: fixed; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 10px; 
    background: blue; 
} 

.test { 
    background: red; 
    height: 1000px; 
    margin: 20px; 
}

2015-02-09 21:33:09 Epsil0neR

+0

打我吧！ [這是另一個小提示，顯示了這一點]（http://jsfiddle.net/nLvn1suv/）。 – 2015-02-09 21:35:13

0

你不能把一個div文檔/視區之外。但是，您可以隱藏滾動條並使用div或自定義滾動條代替它。

CSS

#scrollbardiv{ 
    height:100%; 
    width:12px; 
    background:red; 
    position:fixed; 
    top:0px; 
    right:0px; 
} 

.noscrl{ 
    overflow:hidden; 
} 
body{ 
    overflow:auto; 
}

JS

$("#toggle").on("click", function(){ 

    $("body").toggleClass("noscrl"); 

})

2015-02-09 21:38:09

相關問題