JavaScript scrollTo方法什么都不做?

Nic*_*ick 36 javascript jquery dom

所以我绝望地试图让一些滚动功能在页面上工作.没有运气后我决定坚持window.scrollTo(0, 800);我的页面,看看我是否可以进行任何滚动.什么都没发生.我有一个扩展的手风琴,然后我想滚动到其中的特定元素.但是现在我很乐意看到东西滚动.有人碰到这个吗?

谢谢!

fre*_*evd 68

如果您有这样的事情:

html, body { height: 100%; overflow:auto; }
Run Code Online (Sandbox Code Playgroud)

如果body和html都具有100%的高度定义并且还启用了滚动,则window.scrollTo(和所有派生的滚动机制)不起作用,尽管显示滚动条(可由用户使用),当内容超出时那100%的身高.这是因为您看到的滚动条不是窗口的滚动条,而是主体的滚动条.

解:

html { height: 100%; overflow:auto; }
body { height: 100%; }
Run Code Online (Sandbox Code Playgroud)

  • 继续这里(很多年后!),如果您不想在这种情况下更改 CSS,您可以使用 document.body.scrollTo({ top: ... })` 代替 window.scrollTo 。 (10认同)

Nic*_*ick 21

我能够使用jQuery方法animate()解决这个问题.以下是我使用的实现示例:

$('#content').animate({ scrollTop: elementOffset }, 200);
Run Code Online (Sandbox Code Playgroud)

选择器获取ID ="content"的div.然后我使用scrollTop作为选项应用animate方法.第二个参数是动画持续时间的以毫秒为单位的时间.我希望这有助于其他人.

  • 我尝试了其他答案。这也是唯一对我有用的方法。不同之处在于我使用了 `$('body').animate({ scrollTop: top }, 0);` 其中 `top` 是包含整数 y 坐标的变量。 (2认同)

Vin*_*ven 18

我使用setTimout修复了这个问题.我正在使用angularjs但也许它可以帮助在香草js.

        setTimeout(function () {
            window.scrollTo(0, 300);
        },2);
Run Code Online (Sandbox Code Playgroud)

  • 2 毫秒对我来说不起作用,但 200 毫秒却可以。谢谢! (4认同)
  • @JaberAlNahian 的原因是,在某些情况下,文档仍在呈现,通过添加一个小的延迟来完成加载并准备滚动 (4认同)
  • 它有效,但有人能解释为什么吗? (3认同)
  • 这一定是最好的答案。谢谢。 (2认同)

agm*_*984 12

这昨天发生在我身上,因为我overflow: auto在一个 div 上有一个孩子 to<html><body>

所以我了解到window.scrollTo()为了工作,你必须在元素上设置overflow: auto(或其他overflow-y: scroll<html>

我了解到document.body.scrollTo()为了工作,你必须已经overflow开始<body>

我了解到您也可以使用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; }
Run Code Online (Sandbox Code Playgroud)


Bik*_*net 11

有时它不仅仅是css问题,对我而言浏览器是罪魁祸首.我必须通过这段代码来解决它.

 if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual'
}
Run Code Online (Sandbox Code Playgroud)

它允许开发人员获取滚动更改的所有权.在这里阅读更多相关信息

  • 这绝对是我遇到的问题。该页面最初似乎可以正常运行,然后在随后的重新加载或访问时返回到原来的位置,有时我可以看到在返回之前滚动到该位置的简短说明。谢谢! (2认同)
  • 最后,我以为我快疯了 (2认同)

Asi*_*har 7

对我来说,将 html 和 body 的高度设置为 auto 就可以了。

html, body { height: auto }
Run Code Online (Sandbox Code Playgroud)


小智 7

长话短说

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

为我工作。

解释

我也遇到了以下问题

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

window.scrollTo()

正如@agm1984在这里提到的:

然后我尝试使用:document.querySelector('#dummy_element').scrollIntoView()

这对我来说很有效。

这里以更好的方式解释差异。

快速区别:

Element.scrollIntoView() 方法将调用它的元素滚动到浏览器窗口的视口中。

Window.scrollTo() 方法滚动到文档中的一组特定坐标。


小智 6

我有同样的问题。在 scrollTo 为我工作之前聚焦窗口。

window.focus();
window.scrollTo(0,800);
Run Code Online (Sandbox Code Playgroud)


haz*_*nli 5

这就是我在 React 上所做的,因为我有一个根元素,作为页面上的第一个也是最外层的 div,我滚动到该元素的顶部。

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