2013-04-13 50 views
0

我一直試圖在運行於任天堂3DS遊戲系統的網頁瀏覽器中的網頁上構建一個可移動的div。基本上,當我使用+ Control Pad(與普通鍵盤的箭頭鍵的鍵碼對應)時,div在頁面上滑動。不幸的是,由於我的頁面尺寸太大而無法直接放入3DS視口,因此瀏覽器自動滾動的速度比我的div可以進入視圖的速度快。我已經想出了各種技術採用overflow: hidden;position: fixed;在啓動Keydown時禁用任天堂3DS滾動功能

$(document).keydown(function(event){ 
     event.preventDefault(); 
     //call my function to move the div around 
    }); 

3DS的瀏覽器實際上並未使用傳統的「滾動條」,雖然,它只是滾動無論如何。而且它的position: fixed;支持非常糟糕。

有沒有人有關於如何停止頁面滾動,但允許div移動(並滾動了一點,以顯示更多的頁面時div div命中視口的邊緣)的任何建議?

這是我在stackoverflow的第一篇文章。感謝您的任何想法!

編輯:你可以在這裏看到代碼:Cloud9 IDE link和在這裏的行動:DEMO link

+0

請問您可以使用更完整的代碼做一個codepen嗎?它會幫助我們更好地理解並看看您是否有任何驗證錯誤,奇怪的CSS等。 – Stephen

回答

0

是的,我有這個問題,所有的移動設備。
爲我處理固定在移動設備上的位置的最佳方法是從頁面中完全移除滾動功能並使用JavaScript對其進行模擬,然後更改新滾動事件的位置。
但是,您也可以製作一個不可移動的頁面並只滾動您需要的部分,因此您的元素根本不會移動。

html,body { 
    overflow: hidden 
} 

#divID { 
    overflow: auto; // if you want just vertical scroll overflow-y: auto; 
} 
+0

您能否看到我的鏈接?謝謝!另外,我希望頁面滾動一點,以便在div碰到視口邊緣時顯示更多頁面。 – SpecsRock