iScroll將不會水平滾動，直到放大

我在使用Phonegap/Cordova構建的JQTouch iPhone應用程序中使用iScroll 4（cubiq.org/iscroll-4）。iScroll將不會水平滾動，直到放大

我的問題是，水平滾動，雖然'hScroll：true'，直到我放大和縮小我的圖像，這使得一切工作正常（確認iScroll的作品和CSS的包裝/滾動是正確的）。

HTML：

<div id="wrapper"> 
    <div id="scroller"></div> // Also tried with img-tag in div instead of as bg 
</div>

CSS：

#wrapper { 
position:absolute; 
top:45px; bottom:0; left:0; // 45px is header 
z-index:1; 
width:100%; // Also tried with window size (320) 
overflow:auto; // Also tried with scroll 
} 

#scroller { 
position:absolute; z-index:1; 
width: 1024px; // The size of my image 
height: 414px; // The height of my image 
background: url(img/test.png) no-repeat; 
padding: 0; 
}

JAVASCRIPT：

var myScroll; 
function loaded() { 
    myScroll = new iScroll('wrapper', { 
          hScrollbar: true, 
          vScrollbar: true, 
          hScroll: true, 
          vScroll: true, 
          zoom: true 
          }); 
}

更改 'VSCROLL' 和 '縮放' 的參數具有預期的效果的時候了。與水平滾動相關的參數在縮放啓動後纔會執行任何操作。

我嘗試刷新包裝或滾動到加載後的座標，編輯我的應用程序的加載順序，但沒有任何幫助。

感謝您的時間，安德烈亞斯。

來源

2012-08-02 Andreas

你有沒有解決這個問題？我會着迷於知道答案，因爲我有類似的問題。 – RecursivelyIronic 2012-12-14 03:26:37

您需要手動啓用hScroll選項。

在每一個我的div需要被放大的，我有下面的代碼：

data-iscroll='{"zoom":true, "hScroll":true }'

來源

2012-08-07 18:55:16 pawl

感謝您的回覆。我在iScroll文檔或演示中沒有看到任何關於此的信息。我不確定它是否適合我，因爲我決定從頭開始重建我的應用程序 - 但希望它可以在這種情況下幫助其他人。再次感謝！ – Andreas 2012-08-09 10:02:30

我回去試了這個解決方案，但沒有幫助。還編輯我的問題來進一步解釋我的問題。 – Andreas 2012-09-01 12:54:43

這可能是因爲包裝的div寬度每一次比滾輪格寬度小的。

來源

2012-08-31 09:18:34

我在你的評論之後編輯了這個問題，但是關於CSS，我已經嘗試了幾乎所有我能想到的解決方案 - 所有解決方案都有相同的結果。不過謝謝。 – Andreas 2012-09-01 12:55:51

我有一個類似的問題，除了圖像元素不會一直滾動，直到縮放或窗口調整大小。這個問題原來與DOM更新有關。我在當時隱藏的元素上創建了滾動條。當它稍後變得可見時，滾動不起作用。原來，我不得不顯示，然後刷新滾動。

你可以在這裏找到更多的信息：http://iscrolljs.com/#refresh

示例代碼：

ajax('page.php', onCompletion); 

function onCompletion() { 
    // Update here your DOM 

    setTimeout(function() { 
     myScroll.refresh(); 
    }, 0); 
};

來源

2014-01-30 04:15:52 TreeAndLeaf

iScroll將不會水平滾動，直到放大

回答

相關問題