如何讓瀏覽器保持固定位置滾動？

Question

如何讓瀏覽器不滾動，或者如何讓瀏覽器連續滾動到固定位置？

我正在爲任天堂3DS瀏覽器的庫工作。我使頁面完全適合瀏覽器，但向上箭頭使其滾動，因爲底部屏幕是唯一被識別爲可見區域的窗口。

我想使它成爲div #bottomScreen是底部屏幕中唯一的東西，禁用滾動是我能想到的唯一工作。

我想通了如何通過

document.body.scrollTop = 220; 

我怎樣才能使它不斷地去這個位置滾動到該位置？

用setTimeout製作一個重複的計時器，並將上面的代碼放入它將不起作用。我相信這是因爲這隻在頁面加載之前有效。

有關如何實施它的任何建議？

Answer 1

應該甚至在頁面加載工作的最好的事情。這是代碼，儘管我不確定代碼的意圖是什麼，可能會讓用戶感到煩惱。

setInterval(function(){ document.body.scrollTop = 200 }, 500); // set your time 

Answer 2

更優雅的解決方案是在調用該方法時禁用滾動（從頂部或其他位置滾動到220的位置），並在用戶採取適當的操作時重新啓用它。 。jQuery示例：

$('body').css('overflow', 'hidden'); // removes scrollbars entirely 
$('body').css('overflow', 'auto'); // re-enable scrolling 

否則使用setInterval（）以非常短的時間間隔（如10ms）重複觸發您的滾動功能。如果你打算這麼做，那麼添加一些邏輯來判斷窗口是否已經滾動到大約正確的位置（允許+/- 10像素或者什麼）是明智的，所以對於用戶來說不會非常不和諧。

Answer 3

我在一些網站上看到的最好的方式（比如Twitter，我想或者當圖像彈出時），這是設置溢出屬性隱藏在body元素上。這可以防止任何滾動，所以你只需要擔心內容的位置。

我想你需要將內容包裝在某種容器元素中，當你改變body元素的溢出時，你還要設置容器的y座標以顯示正在查看的頁面的特定區域。

這是迄今爲止我所看到的要達到這樣的效果，因爲它不需要定時器等

Answer 4

你可以添加一個事件偵聽scroll事件，然後設置位置即可。