如何獲取移動Safari中顯示的滾動條？

我寫的jQuery時間選取器插件使用div作爲時間列表的包含塊，而在Mobile Safari上，沒有滾動條表示存在比可見時間多的可用時間。我知道使用兩根手指在div內滾動（至少在iPad上），但只有當用戶知道有更多內容滾動到，並且沒有任何跡象表明存在時，該功能才起作用。所以，我的問題：有沒有人能夠讓滾動條顯示在移動Safari？你怎麼做的？如何獲取移動Safari中顯示的滾動條？

來源

2010-08-18 Daniel Cotter

（iPhone 4/iOS的7下測試），您可能還需要考慮不同的方法來顯示，有更多的內容，如顯示的東西被切斷，或者箭頭用戶... – mb21 2013-06-21 17:52:30

是這個iOS5？你正在談論 – MarmiK 2013-06-24 12:40:51

如果你想要顯示水平滾動條，你需要添加'height：8px;'到最上面的答案。 – Utku 2017-11-04 13:58:11

按照慣例，iOS上不使用滾動條。

對於與overflow: scroll div，唯一的原生滾動方式是用兩根手指。

您可能會看看iScroll，這是一個處理觸摸事件並實現單指動量滾動（用戶通常在本機應用程序中預期的）的JavaScript庫。

來源

2011-02-18 00:28:08 Matt

直到ios5你不能滾動內部div - 所以你可能沒有看到滾動條，當你嘗試滾動，因爲沒有一個。

我還沒有在ios5上測試，但據說滾動內部div現在工作。

如果它不是一個內部div，那麼只有在滾動時才能看到滾動條 - 這不僅僅是在ios上 - 獅子也擺脫了所有原生滾動條。只有當窗口正在滾動或窗口首次加載時才能看到它們。

來源

2011-12-07 21:33:20 HarrisonJackson

關於最初的問題：滾動條的最佳解決方案是使用外部庫（已推薦iScroll是好的，但即使是jQuery UI itself contains scrollbars）。但是顯示永遠存在的滾動條可能會偏離一般的iOS UI（見下文）。

另一種方法是用其他GUI元素指示內容是可滾動的。考慮元素末尾的小漸變字段（內容淡入此處），這表明內容在觸摸和滾動時會繼續。

在iOS5中overflow: scroll的功能與預期相同，即允許用div的尺寸指定的區域內的一根手指向上/向下滾動div。但可滾動的div沒有滾動條。這與iOS（5）中的通用UI有點不同。通常也沒有滾動條，但它們在用戶開始滾動內容區域時出現，並在觸摸事件停止後再次淡出。

來源

2012-01-04 10:19:44 hanskan

爲什麼'overflow：scroll'在x軸上無法正常工作？ – GreySage 2017-06-08 22:13:14

移動探險，據我所見不會支持滾動條。我能找到的最好的插件是this。

其演示可用here。它也有多個predefined skins以適合您的應用程序。

這裏，你會得到什麼樣的樣本 -

enter image description here

來源

2013-06-21 11:19:46

假設你正在使用的iOS5。0或更高版本，我認爲你必須使用以下方法：

-webkit-overflow-scrolling: auto（這是默認樣式）

汽車：一個手指滾動而不勢頭。

其他可用的風格是

-webkit-overflow-scrolling: touch

觸摸：母語式的滾動。指定此樣式具有創建放樣上下文（如不透明，蒙版和變換）的效果。

使用touch模式時，滾動條在用戶觸摸並滾動時可見，但在不使用時會消失。如果你想讓它總是可見的，那麼這個old post將幫助您：

::-webkit-scrollbar { 
    -webkit-appearance: none;// you need to tweak this to make it available.. 
    width: 8px; 
}

Thumb代碼的另一塊由@BJMC：

::-webkit-scrollbar-thumb { 
    border-radius: 4px; 
    background-color: rgba(0,0,0,.5); 
    box-shadow: 0 0 1px rgba(255,255,255,.5); 
}

Original Source

編輯：關於this demo's的行爲，你應該使用jQuery，因爲它會對你有很大的幫助，$(document).ready(function(){//your code with timer})帶有定時器的代碼將需要重置CSS屬性所需的時間後，正常（假設5秒）

在演示中（即你所描述），這與onhover事件啓動，請檢查該fiddle我爲創建。

在桌面瀏覽器中重現結果，並且也可以在iPad中使用，只需添加您的計時器代碼以滿足您的要求即可。

來源

2013-06-24 13:12:17 MarmiK

我正在尋找一種方式，使其行爲像iOS的彈出窗口最初出現，然後淡出。所以你知道它是可以滾動的，但是它會一路順風。我想我可以在加載時添加一個類來應用:: - webkit滾動條規則，並使用css轉換將其淡出。 – 2013-06-24 14:11:46

我在div上使用'-webkit-overflow-scrolling：touch'，直到開始滾動時纔看到滾動條。 – 2013-06-25 08:16:12

用戶代理切換器？你是說你沒有在實際的iPad/iPhone上測試過這個，因爲這是知道它會在iOS上運行的唯一方法。 – 2013-06-25 12:43:37

回答Sam Hasler上面的評論。 Nicescroll 3是一個jQuery插件，它可以完成淡入/淡出效果，並可在所有主流的移動/平板/桌面瀏覽器中使用。

Live demo

代碼：

$(document).ready(function() {  
    $("html").niceScroll({styler:"fb",cursorcolor:"#000"}); 
    $("#divexample1").niceScroll();//or styles/options below 
    $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true}); 
    $("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true}); 
    });

來源

2013-06-25 00:55:24 Gomino

*這是*如何做兼容性表！ – 2013-06-25 08:19:25

@SamHasler有沒有理由爲什麼我的回答不令你滿意，也許我可以幫忙？ – Gomino 2013-06-26 12:35:40

我提高了這個答案，因爲它確實解決了這個問題，但它是一個插件，然後我將作爲一個（大於3000+ LOC）依賴項，而不是我可以理解和管理自己的幾行css/js，所以我贏了不會使用它。 – 2013-06-27 07:57:54

如果你想有滾動是始終可見，

不要設置-webkit-overflow-scrolling: touch

然後設置自定義樣式的滾動條

::-webkit-scrollbar { 
    -webkit-appearance: none;// you need to tweak this to make it available.. 
    width: 8px; 
}

你失去了動力效果，但滾動條將永遠在那裏。

來源

2016-02-03 05:00:51 lulalala

，但在某些情況下刪除'-webkit-overflow-scrolling：touch'有時會停止滾動效果，直到我將iPhone從縱向 - >橫向 - >縱向切換回來。那麼它的工作。 – 2017-02-17 09:55:52

如何獲取移動Safari中顯示的滾動條？

回答

相關問題