我如何可以使用標準的瀏覽器滾動條

所以我有標準煎茶觸摸面板，因爲這種應用需要能夠交互爲移動用戶和桌面（webkit的）用戶，我需要這種感覺，看起來像一個標準的Web應用程序。如何在使用桌面瀏覽器瀏覽時使用永久瀏覽器滾動條替換觸摸滾動條？

我確定我可以鍛鍊如何基於設備運行，但我不知道如何替換滾動條。我正在運行最新版本的sencha touch - 2測試版。

Cheers，Josh

2012-02-23 Josh Mc

好了，任何未來的煎茶的用戶，這是我設法想出解決方法：

任意位置添加此功能：

var setupPCScrollbar = function(container){ 
    var isMobile = (navigator.appVersion.toLowerCase().indexOf("mobile") > -1 || navigator.appVersion.toLowerCase().indexOf("ipad") > -1); 
    if(!isMobile){ 
     if(container.isXType('selectfield'))container = container.down('list');// Add support for selectbuttons 
     if(!Ext.isFunction(container.getScrollable) || !container.getScrollable() || !Ext.isFunction(container.getScrollable().getScroller))return console.warn("Attempting to apply pc scroller to non-container item"); 
     container.getScrollable().getScroller().setDisabled(true); 
     var scrollContainers = Ext.DomQuery.select('.x-scroll-container', container.element.dom); 
     var scrollBars = Ext.DomQuery.select('.x-scroll-indicator', container.element.dom); 
     for(var i=0;i<scrollContainers.length;i++) 
      scrollContainers[i].style.overflow = "auto"; 
     for(var i=0;i<scrollBars.length;i++) 
      scrollBars[i].style.zIndex = "-1"; 
    } 
}

此功能將檢查手機/ iPad，那麼如果這些都沒有找到（可能是PC），然後禁用sencha觸摸滾動條，隱藏滾動條和添加標準的HTML滾動條。

此功能用於舉例如下，並應在面板上，列表等工作：

var container = ... 
setupPCScrollbar(container);

我想有這個實現爲一個插件，但不知道如何將它添加到'容器'類的構造函數。

**注意這是一個ipad/pc特定的應用程序。

希望這可以幫助別人:)

來源

2012-02-24 02:52:42

我在應用程序中使用您的代碼。適用於Chrome和Safari。不幸的是，在IE10 64bit Win7（桌面）上，滾動行爲非常奇怪。滾動會在頁面的頂部和底部創建無限的空白空間。 IE10無法正常工作。你會對IE10有其他想法嗎？或者這個代碼可以擴展到IE10嗎？ – rohit12sh 2013-11-07 02:30:15

我不確定IE10對不起，當我用sencha開發時，我不確定它是否可用。已經被帶到了KendoUI。 – 2013-11-11 06:50:28

HTML/CSS對於滾動條的外觀和功能沒有特別的瞭解。您可以真正指定的是溢出模式，讓瀏覽器知道何時允許滾動。如果設置爲overflow: auto或overflow: scroll不會導致頁面像您期望的那樣呈現，那麼您必須接受它或者滾動您自己的基於JavaScript的滾動窗口小部件。

來源

2012-02-23 03:18:39 Jacob

我想不亞於任何我想知道是否有人曾經這樣做過，或者如果有對功能的插件。謝謝回覆。 – 2012-02-23 20:24:34

我必須自己寫過去，這很痛苦。我還沒有嘗試過任何插件，但http://jscrollpane.kelvinluck.com/看起來很有前途。 – Jacob 2012-02-23 20:28:55

我瞭解css，問題在於，我不確定如何訪問滾動條，刪除用於sencha touch的DOM/Css，並添加我自己的溢出：auto; – 2012-02-24 01:47:16

我如何可以使用標準的瀏覽器滾動條

回答

相關問題