scrollIntoView 是否適用於所有瀏覽器？
[英]Does scrollIntoView work in all browsers?
問題描述
scrollIntoView()是否適用於所有瀏覽器？ 如果沒有，是否有jQuery替代品？
7 個解決方案
解決方案1
80 已采納 2012-02-25 16:55:16
它支持是，但用戶體驗是......糟糕的。
正如@ 9bits所指出的，這一直是所有主流瀏覽器都支持的 。 不用擔心。 主要問題是它的工作方式。 它只是跳轉到一個特定的元素，也可能在頁面的末尾。 通過跳轉到它，用戶不知道是否：
- 頁面已向上滾動
- 頁面已向下滾動
- 他們被重定向到其他地方
前兩個可以通過滾動位置確定，但誰說用戶在跳轉之前跟蹤滾動位置？ 所以這是一種不確定的行為。
最后一個可能是真的，特別是如果頁面具有滾動視圖的移動標題並且剩余頁面設計不暗示在同一頁面上的任何內容（如果它也沒有任何總高度垂直元素，如左菜單酒吧）。 有多少頁面有這個問題你會感到驚訝。 親自檢查一下。 轉到某個頁面，在頂部查看，然后按結束鍵再次查看。 您可能會認為這是一個不同的頁面。
動畫scrollintoview jQuery插件來救援
這就是為什么仍然有插件執行滾動到視圖而不是使用本機DOM功能。 它們通常動畫滾動，消除了上面列出的所有3個問題。 用戶可以輕松跟蹤運動。
解決方案2
13 2012-02-25 16:40:27
看起來像這樣： http ： //www.quirksmode.org/dom/w3c_cssom.html
解決方案3
3 2012-11-18 09:13:23
我使用Matteo Spinnelli的iScroll-4 ，它也適用於iOS Safari。 它有三個方法scrollTo，scrollToElement和scrollToPage。 假設你有一個包含在div中的無序元素列表。 正如羅伯特·科里特尼克（Robert Koritnik）上面所寫，你需要有一個輕微的動畫來表明你已經滾動了。 以下方法實現了這種效果。
scrollToElement(element, time);
解決方案4
1 2014-11-25 05:09:31
沒試過這個，但似乎捎帶內置的scrollIntoView函數會節省很多代碼。 如果你想要動畫動作，我會怎么做：
- 將容器的當前滾動位置緩存為START POSITION
- 運行內置在scrollIntoView中
- 將滾動位置再次緩存為END POSITION
- 將容器返回到START POSITION
- 動畫滾動到結束位置
解決方案5
1 2017-02-02 08:12:30
請閱讀有關scrollIntoViewIfNeeded的信息
if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
解決方案6
0 2018-06-20 13:07:19
您可以使用jQuery替代和動畫<html>和<body>元素：
$('html, body').animate({
scrollTop: $("#myElem").offset().top
}, 1000);
解決方案7
0 2022-08-09 09:42:54
Css 解決了伙計們！ 我用#idSelected 選擇了目標ID，並用css“scroll-margin-top”設置了它的樣式，並以rems 定義了我的邊距頂部（使用適合您的任何測量值）。
#idSelected {
scroll-margin-top: 10rem;
}
JPlayer在Firefox Android上不起作用，但在所有其他瀏覽器上
[英]JPlayer Does Not Work On Firefox Android But All Other Browsers
ActiveXObject（'Word.Application'）是否在所有瀏覽器中均可工作？
[英]Does ActiveXObject('Word.Application') work in all browsers?
簡單的Javascript在FireFox中不起作用（但在所有其他瀏覽器中都有效）
[英]Simple Javascript doesn't work in FireFox (but does in ALL other Browsers)
JavaScript scrollIntoView函數不起作用-頁面無法滾動到元素視圖
[英]JavaScript scrollIntoView function does not work - the page does not scroll into the element view
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
JavaScript .split函數不適用於所有瀏覽器
jQuery不起作用，但在所有瀏覽器中都是最后一個元素
JPlayer在Firefox Android上不起作用，但在所有其他瀏覽器上
ActiveXObject（'Word.Application'）是否在所有瀏覽器中均可工作？
簡單的Javascript在FireFox中不起作用（但在所有其他瀏覽器中都有效）
Jquery的新功能 - 它不會在任何瀏覽器上加載或工作
localStorage無法傳輸數據，並非在所有瀏覽器中都適用
函數調用的js括號表示法是否在所有瀏覽器上均有效
設置document.domain是否適用於所有（大多數）瀏覽器？
JavaScript scrollIntoView函數不起作用-頁面無法滾動到元素視圖
相關標簽