堆棧內存溢出
  簡體   English   中英

JavaScript scrollTo 方法什么都不做？

[英]JavaScript scrollTo method does nothing?

 原文  2009-07-23 22:34:37  8   21    javascript/ jquery/ dom

問題描述

所以我絕望地試圖讓一些滾動功能在頁面上工作。 在沒有運氣之后我決定堅持window.scrollTo(0, 800); 在我的頁面上查看是否可以進行任何滾動。 沒有任何事情發生。 我有一個展開的手風琴，然后我想滾動到其中的特定元素。 但是現在我很樂意看到這個東西滾動。 有人遇到這個嗎？

謝謝！

21 個解決方案

解決方案1
 93  2013-09-02 12:42:13

如果你有這樣的事情：

html, body { height: 100%; overflow:auto; }

如果 body 和 html 的高度定義都為 100% 並且啟用了滾動，則 window.scrollTo（和所有派生的滾動機制）不起作用，盡管顯示滾動條（用戶可以使用），當內容超過那個100%的身高。 這是因為您看到的滾動條不是窗口的滾動條，而是正文的滾動條。

解決方案：

html { height: 100%; overflow:auto; }
body { height: 100%; }

解決方案2
 36  2015-10-24 16:06:38

我使用 setTimout 解決了這個問題。 我正在使用 angularjs 但也許它也可以幫助 vanilla js。

        setTimeout(function () {
            window.scrollTo(0, 300);
        },2);

解決方案3
 28 已采納  2009-07-29 21:16:54

我能夠使用 jQuery 方法 animate() 解決這個問題。 這是我使用的實現示例：

$('#content').animate({ scrollTop: elementOffset }, 200);

選擇器正在獲取 ID = "content" 的 div。 然后我將 animate 方法應用於其上，並使用 scrollTop 作為選項。 第二個參數是以毫秒為單位的動畫持續時間。 我希望這對其他人有幫助。

解決方案4
 22  2017-12-27 07:58:22

有時不僅僅是 CSS 問題，對我來說瀏覽器是罪魁禍首。 我不得不用這個代碼解決它：

if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual'
}

它讓開發人員擁有滾動更改的所有權。 在此處閱讀更多相關信息

解決方案5
 11  2019-10-08 17:04:27

昨天這發生在我身上，因為我在<html>和<body>的子節點上有overflow: auto 。

所以我了解到，要使window.scrollTo()工作，您必須在<html>元素上設置overflow: auto （或其他任何內容， overflow-y: scroll ）。

我了解到要使document.body.scrollTo()工作，您必須在<body>上設置overflow 。

我了解到您還可以使用document.querySelector('#some-container').scrollTo()在任何其他元素（如果需要）上使用它。

就我而言，我希望window.scrollTo()起作用，所以我將溢出 CSS 放在<html> 。

我很驚訝這里沒有其他答案談論“確切哪個”元素是可滾動的。 根 html 元素必須是可滾動的， window.scrollTo()才能工作。 <html>下游的所有子元素都設置為height: auto 。

我的 CSS 是這樣的：

html { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; }
body { width: 100%; height: auto; }
#app { width: 100%; height: auto; }

解決方案6
 6  2019-06-28 19:57:45

我有同樣的問題。在 scrollTo 為我工作之前聚焦窗口。

window.focus();
window.scrollTo(0,800);

解決方案7
 5  2022-02-25 03:45:56

長話短說

document.querySelector('#dummy_element').scrollIntoView()

為我工作。

解釋

我也有以下問題

document.querySelector('#some-container').scrollTo()

window.scrollTo()

正如這里提到的@agm1984：

然后我嘗試使用： document.querySelector('#dummy_element').scrollIntoView()

這對我有用。

這里以更好的方式解釋了差異。

快速區別：

Element.scrollIntoView() 方法將調用它的元素滾動到瀏覽器的視口中 window。

Window.scrollTo() 方法滾動到文檔中的一組特定坐標。

解決方案8
 3  2019-08-21 05:02:55

對我來說，將 html 和 body 的高度設置為 auto 就成功了。

html, body { height: auto }

解決方案9
 3  2020-08-11 16:34:57

這就是我在 React 上所做的，因為我有一個根元素，作為頁面上第一個也是最外面的 div，我滾動到該元素的頂部。

      const root = document.getElementById('root');
      root.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });

解決方案10
 3  2020-12-04 20:49:58

我遇到了這個問題，與這些答案無關。 在升級到 Bootstrap 4 后，我的問題首先出現，它將我的很多 div 轉換為display: flex 。 事實證明，JQuery 的scrollTop()在 flex 布局中不能很好地工作。

我的解決方案是更改我的舊代碼：

$("#someId").scrollTop(1000);

// or

$("#someId").animate({ scrollTop: 1000 }, 500);

到

$("html,#someId").scrollTop(1000);

// or

$("html,#someId").animate({ scrollTop: 1000 }, 500);

唯一的區別是在需要滾動的 div 之前添加“html”。

幫助我解決這個問題的道具。

解決方案11
 3  2011-07-19 03:15:00

我今天遇到了同樣的問題，然后我發現當我取出自動生成的 doctype 塊時：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

window.scrollTo(0,800) 開始與我最初嘗試使用的 ExtJs scrollTo() 函數一起工作。 我把塊放回去，它停止工作。 我不知道這是否是您遇到的問題（2 年前），但希望這可以幫助其他人遇到同樣的問題。

解決方案12
 1  2016-09-21 01:12:49

檢查您的標簽是否插入您的滾動條是否出現 CSS 溢出 [/-xy] : hidden。 它修復了錯誤

解決方案13
 1  2020-11-10 10:16:17

就我而言： window.scrollBy(0,200); 工作中。

我不知道為什么window.scrollTo(0,200); 不工作和window.scrollBy(0,200); 工作中。

解決方案14
 1  2020-12-15 23:07:15

document.body.scrollTo(0, 800)這解決了我的問題。

解決方案15
 0  2009-07-24 13:16:49

首先，您的頁面是否足夠大以滾動（即使它在 iframe 中）？ 如果沒有，或者你不確定，做一個巨大的 div，然后在它下面放一些東西。 嘗試滾動到那個。

接下來，如果您在 iframe 中滾動，請將您的代碼與框架源放在同一頁面上。 這樣您就不必擔心在另一個窗口中獲取文檔或特定元素，這可能很棘手。 哦，是的，你確定你做對了那部分嗎？ 逐步使用 Firebug 可以幫助您解決這個問題。

最后，在應該導致滾動發生的行上放置一個斷點（使用 Firebug）。 它是否達到該斷點？ 如果沒有，您的代碼沒有執行，滾動不是您的問題。

（我回答了這個，並提供了您之前問題的支持上下文。）

編輯：

滾動是一個窗口一個窗口地完成的。 如果您處於無法滾動的框架中，則不會滾動。 如果要滾動到框架中的該元素，請獲取該元素與其當前窗口的偏移量並將其添加到包含框架的偏移量。 這應該夠了吧。

解決方案16
 0  2020-05-14 20:40:10

如果向下滑動后滾動已經完成，它應該等待div完成這樣的動畫

$('#div-manual-lots').slideDown(200, function () { $("html, body").animate({ scrollTop: $(document).height() }, 1000) });

解決方案17
 0  2020-12-18 07:58:12

使用 onunload 屬性對我有用

window.onunload = function(){ window.scrollTo(0,0); }

解決方案18
 0  2021-06-23 12:00:14

在 React 應用程序中，使用 setTimeout 包裝 window.scrollTo 有效。

useEffect(() => {
  if (scrollPosition > 0) {
    setTimeout(() => window.scrollTo(0, scrollPosition), 0);
    setScrollPosition(0);
  }
}, [scrollPosition]);

解決方案19
 0  2021-12-23 16:55:24

如果由於某種原因兩者

   html,body {overflow: hidden}

必須設置，您仍然可以通過以下方式以編程方式滾動：

   document.body.scrollTop = document.body.scrollHeight; // scrolls to bottom
   document.body.scrollTop = 0; // scrolls to top

解決方案20
 -2  2019-02-21 04:20:25

當window.scrollTo(x,y)在瀏覽器的控制台上不起作用，並且在滾動后呈現 dom 時，您可以使用它。

要在Splash或任何javascript 渲染服務上滾動，請在 js 下執行：

document.body.style.height = "2000px";
window.scrollTo(0,2000);

在Splash 中，您可以執行類似的操作：

  assert(splash:wait(10))
  assert(splash:runjs("document.body.style.height = '2000px';"))
    assert(splash:runjs("window.scrollTo(0,2000);"))
  assert(splash:wait(2))
  assert(splash:runjs("window.scrollTo(0,0);"))

解決方案21
 -3  2009-07-23 23:09:55

顯然，如果您的頁面至少（viewport.height - 800）很高，它將不會滾動。 你看到滾動條嗎？ 否則你做錯了什么。

解決方案22
 -3  2009-07-24 12:12:47

獲取此代碼： http : //www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollToExample.htm並另存為 html 文件。 請注意它如何硬編碼一個比瀏覽器視口大的非常大的 div。 您可能需要在頁面底部添加內容才能使滾動正常工作。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 scrollTo（）函數什么都不做 WKWebView javascript方法click（）無效 嘗試編寫JavaScript函數以使scrollTo方法動畫化 Javascript ScrollTo在頁面加載時不起作用 javascript的scrollTo 什么都不做的數組方法 如果語句什么都不做 javascript 如何在Javascript中將x，y動態值分配給scrollTo（）方法？ window.scrollTo 方法並非每次都有效 - JavaScript 為什么此腳本不執行scrollTo（x，y）JavaScript？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM