隱藏/刪除滾動條 <body> 但允許滾動
[英]Hide/remove scrollbar from <body> but allow scrolling
問題描述
按照標題，是否有辦法從主體 （不是div，而是整個主體）隱藏/刪除滾動條並保持啟用“ scrollable屬性”？ 這些天來我一直在嘗試不同的解決方案，但實際上沒有任何效果。
先感謝您！
6 個解決方案
解決方案1
4 2017-03-05 20:10:22
Fabian Schultz提供的 -webkit-解決方案效果很好，我補充說： -ms-overflow-style:none; 隱藏IE上的滾動條。 啟用滾動，隱藏滾動條。
這是完整的CSS：
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar-button {
display: none;
}
body {
-ms-overflow-style:none;
}
解決方案2
0 2016-10-10 12:59:03
在Webkit瀏覽器中，可以使用滾動條樣式來“隱藏”它：
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar-button {
display: none;
}
這里的例子 。
不幸的是，這在IE，Edge和Firefox中不起作用 。
解決方案3
0 2016-10-10 13:25:04
如果您包裝內容，則不想在<div class='hidden-scrollbar'> ，例如，將可滾動內容放在類似<div class='inner'> ，例如：
<div class='hidden-scrollbar'>
<div class='inner'>
Lorem ipsum dolor sit amet...
</div>
</div>
您可以應用以下樣式來刪除垂直滾動條：
body {
padding:50px;
}
.hidden-scrollbar {
background-color:black;
border:2px solid #666;
color:white;
overflow:hidden;
text-align:justify;
}
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
您可能需要對頁面的內容進行一些重做，這在糊塗方面是一種觸動，但是據我所知，這是獲得所需內容的唯一方法。 這是一個小提琴，表明了它的實際作用 。
解決方案4
0 2016-10-10 13:40:54
隱藏滾動條並保持功能不變似乎對人體元素來說是一件困難的事情。 但這對您來說可能是一個足夠好的解決方案：
CSS：
body{overflow:hidden;}
body:hover {overflow:auto;}
解決方案5
-2 2016-10-10 12:45:02
您可以使用下面的代碼隱藏垂直和水平滾動。 有關詳細答案，您可以檢查此問題 。
<style type="text/css">
body {
overflow:hidden;
}
</style>
解決方案6
-2 2016-10-10 12:55:40
通過CSS解決方案嘗試一下
body{
overflow : hidden
}
如果必須在jQuery中進行相同的操作
$("body").css("overflow", "hidden");
這應該像一種魅力。
隱藏滾動條/刪除滾動條
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.