JavaScript scrollTo 方法什么都不做？

因此，我拼命尝试获得一些滚动功能，以工作在一个页面。在没有一个运气，我决定只是坚持在我的页面 window.scrollTo(0, 800);，看看是否我可以得到任何滚动发生。什么都没发生。我有一个手风琴，展开，然后我想滚动到一个特定的元素与它。但现在我很乐意看到它滚动。有人碰到这个吗？

谢谢！

132394 次浏览
小开

拿这个代码来说: Http://www.java2s.com/code/javascriptreference/javascript-methods/scrolltoexample.htm 并保存为 html 文件。注意它是如何硬编码一个比浏览器视口大得多的 div 的。您可能需要在页面底部添加一个内容，这样滚动才能正常工作。

小开

首先，您的页面是否足够大，可以滚动(即使是在 iframe 中) ？如果不是，或者你不确定，做一个巨大的 div，然后在它下面放一些东西。试试滚动到那里。

接下来，如果在 iframe 中滚动，则将代码放在与框架源相同的页面上。这样，您就不必担心在另一个窗口中获取文档或特定元素，这可能很棘手。你确定你没弄错吗？使用 Firebug 可以帮助您解决这个问题。

最后，在行上放置一个断点(使用 Firebug) ，该断点应该会导致发生滚动。它会到达那个断点吗？否则，代码将不会执行，滚动不是您的问题。

(我用 你之前的问题提供的支持上下文回答了这个问题。)

编辑:

一个窗口一个窗口地滚动。如果你在一个无法滚动的框架中，那么什么也不会滚动。如果您希望滚动到框架中的元素，请获取该元素到其当前窗口的偏移量，并将其添加到包含框架的偏移量中。这样应该可以了。

小开
最佳答案

我能够使用 jQuery 方法 animate ()解决这个问题。下面是我使用的实现的一个例子:

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

选择器获取 ID = “ content”的 div。然后，我使用 scrollTop 作为一个选项对其应用 animate 方法。第二个参数是动画持续时间的时间(毫秒)。我希望这能帮到别人。

小开

今天我遇到了同样的问题，然后我发现当我去掉自动生成的 doctype 块时:

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

ScrollTo (0,800)开始与我最初试图使用的 ExtJs scrollTo ()函数一起工作。我把积木放回去，它就不工作了。我不知道这是否是你遇到的(2年前) ，但希望这能帮助其他人遇到同样的问题。

小开

如果你有这样的东西:

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

如果 body 和 html 都有一个100% 的高度定义并且启用了滚动，当内容超过100% body 高度时，window.scrollTo (以及所有派生的滚动机制)将无法工作，尽管会显示一个滚动条(用户可以使用)。 这是因为您看到的滚动条不是窗口的滚动条，而是主体的滚动条。

解决方案:

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

我使用 setTimout 修复了这个问题。我用的是 angularjs 不过也许在香草 Js 里也有用。

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

检查你的标签是否被插入你的滚动条获得一个 CSS 溢出[/-x-y ] : hide。 修好了窃听器

小开

有时候不仅仅是 CSS 的问题，对我来说浏览器才是罪魁祸首。我必须用这个代码解决它:

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

它允许开发人员获得滚动条更改的所有权

小开

当 window.scrollTo(x,y)不能在浏览器的控制台上工作，并且在滚动之后呈现 dom 时，您可以使用这个。

要在 水花四溅或任何 Javascript 渲染服务上滚动，请执行以下 js:

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

在 水花四溅中，你可以做类似的事情:

  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);"))
小开

我也有同样的问题，在滚动之前对焦窗口对我来说很有用。

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

对于我来说，设置 html 和 body 的高度来自动完成这个技巧。

html, body { height: auto }
小开

这种情况昨天发生在我身上，因为我在一个 div 上有 overflow: auto，它是 <html>和 <body>的一个子节点。

因此，我了解到，要使 window.scrollTo()工作，必须在 <html>元素上设置 overflow: auto(或者其他什么，overflow-y: scroll)。

我了解到，为了使 document.body.scrollTo()工作，你必须将 overflow设置在 <body>上。

我了解到你也可以使用它在任何其他元素(如果你想)使用 document.querySelector('#some-container').scrollTo()。

在我的例子中，我希望 window.scrollTo()工作，所以我将溢出 CSS 放在 <html>上。

我很惊讶在这里没有其他的答案谈论“确切的”元素是可滚动的。要使 window.scrollTo()工作，根 html 元素必须是可滚动的。所有 <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; }
小开

如果滚动已经完成后，一个幻灯片下降，它应该等待 div 完成这样的动画

$(’# div-Manual-lot’) . slideDown (200，function (){ $(“ html，body”) . animate ({ scrollTop: $(document) . height ()} ，1000) }) ;

小开

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

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

在我的例子中: window.scrollBy(0,200);正在工作。

我不知道为什么 window.scrollTo(0,200);不工作，而 window.scrollBy(0,200);是工作。

小开

我遇到了这个问题，和这些答案没有任何关系。对我来说，问题首先出现在升级到 Bootstrap 4之后，它将我的很多 div 转换成了 display: flex。事实证明，JQuery 的 scrollTop()在弹性布局中并不能很好地工作。

对我来说，解决方案是将我的旧代码从:

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


// or


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

到

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


// or


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

唯一的区别是在需要滚动的 div 之前添加“ html”。

感谢 这个问题帮我解决了这个问题。

小开

这解决了我的问题。

小开

使用 onunload 属性对我很有用

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

在 React 应用程序中，使用 setTimeout 包装 window.scrollTo 可以工作。

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

如果出于某种原因

   html,body {overflow: hidden}

如果必须设置，你仍然可以通过编程方式滚动:

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

DR

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

对我有用。

解释

我也有以下问题

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

window.scrollTo()

@ agm1984提到的 给你:

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

对我来说很有效。

用更好的方式解释了 给你的差异。

快速区别:

ScrollIntoView ()方法滚动调用它的元素到浏览器窗口的 Viewport 中。

ScrollTo ()方法滚动到文档中的特定坐标集。


提交答案