隱藏的WebKit滾動條時溢出滾動：觸摸啓用

大家都知道，你可以隱藏在Safari和鉻滾動條與下面的CSS代碼片段：隱藏的WebKit滾動條時溢出滾動：觸摸啓用

::-webkit-scrollbar { 
    display: none; 
}

然而，這似乎並沒有工作當-webkit-overflow-scrolling設置爲touch時，特別是在iOS上。 Chromium正確隱藏了滾動條。

這是一個WebKit錯誤，還是有辦法隱藏滾動條並啓用流體（觸摸）滾動？這似乎是可能的（也許與js？），在移動版本Google。通過頁面源查看和谷歌搜索我的答案似乎沒有幫助，但。

來源

2016-11-22 Avery Magnotti

支持水平正在開發中。這就是蘋果說：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-滾動可能會有一些破解。 – Veer

謝謝。我會找到另一種方法。 –

看來，目前（截至2017年1月）解決此問題的唯一方法是將父級div中的可滾動元素包裝起來，並從視圖中手動隱藏滾動條。

這可以通過應用一個固定的高度/寬度和overflow: hidden;到父div來實現。然後，您可以向原始元素添加額外的填充或高度/寬度，實質上，將滾動條從視圖中移出。

Mark Otto tweeted about the issue早在2016年6月。以下是他的解決方法示例：https://output.jsbin.com/lohiga。

的基本思路是這樣的：

<header> 
    <div> <!-- parent wrapper added --> 
    <nav> 
     <a href="#">First link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Last link</a> 
    </nav> 
    </div> 
</header>

CSS：

header { 
    margin: 20px 0; 
    padding: 10px 5px; 
    text-align: center; 
    background-color: #f5f5f5; 
    border-bottom: 1px solid #ddd; 
} 

// Parent wrapper 
div { 
    height: 30px; 
    overflow-y: hidden; // "crop" the view so the scrollbar can't be seen 
} 

// Original scrollable element 
nav { 
    padding-bottom: 20px; // extra padding to push the scrollbar out of view 
    overflow-x: auto; 
    text-align: center; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
} 

nav a { 
    display: inline-block; 
    padding: 5px 10px; 
}

來源

2017-01-15 03:56:32

謝謝！對不起，延遲時間很長 - 我不經常在這裏問問題。 –

隱藏的WebKit滾動條時溢出滾動：觸摸啓用

回答

相關問題