Question

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

谢谢！

Answer 1

如果你有这样的事情：

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

如果body和html都具有100％的高度定义并且还启用了滚动，则尽管显示了滚动条（可以由用户使用），window.scrollTo（以及所有派生的滚动机制）都不起作用，内容超过100％的身高。这是因为您看到的滚动条不是窗口的滚动条，而是主体的滚动条。

解决方案：

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

Answer 2

我能够使用jQuery方法animate（）解决这个问题。以下是我使用的实现示例：

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

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

Answer 3

我使用setTimout解决了这个问题。我正在使用angularjs但也许它可以帮助在香草js。

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

Answer 4

有时它不仅仅是css问题，对我而言浏览器是罪魁祸首。我不得不用这段代码来解决它。

  @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;

        Product product = (Product) o;
        String prdId = product.getProductId();

        return  (productId == prdId) || (productId != null && 
                 productId.equals(prdId)); // null-safe equals
    }

它允许开发人员获取滚动更改的所有权。详细了解here

Answer 5

我今天遇到同样的问题然后我发现当我拿出自动生成的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年前），但希望这有助于其他人遇到同样的问题。

Answer 6

我遇到了这个问题，与这些答案无关。对我来说，问题首先出现在升级到Bootstrap 4之后，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”。

向this issue提出帮助以帮助我解决问题。

Answer 7

检查你的标签插在哪里你的滚动得到一个CSS溢出[/ - x-y]：hidden。它修复了错误

Answer 8

我遇到了同样的问题。在scrollTo之前为我服务的是焦点窗口。

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

Answer 9

对我来说，将html和body的高度设置为auto可以解决问题。

html, body { height: auto }

Answer 10

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

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

Answer 11

在 React 应用中，使用 setTimeout 包装 window.scrollTo 有效。

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

Answer 12

使用onunload属性对我有用

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

Answer 13

document.body.scrollTo(0, 800)这解决了我的问题。

Answer 14

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

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

Answer 15

如果向下滑动后已完成滚动，则应等待div完成动画

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

Answer 16

昨天发生了这件事，因为我在一个Credit risk和output1的孩子的div上有一个1。

因此，我了解到要使overflow: auto起作用，必须在<html>元素上设置<body>（或其他任何window.scrollTo()）。

我了解到要使overflow: auto工作，必须在overflow-y: scroll上设置<html>。

我了解到您还可以使用document.body.scrollTo()在其他任何元素（如果需要）上使用它。

在我的情况下，我希望overflow工作，所以我将溢出CSS放在<body>上。

我很惊讶在这里没有其他答案谈论“确切地”哪个元素是可滚动的。 html根元素必须是可滚动的，document.querySelector('#some-container').scrollTo()才能正常工作。我在window.scrollTo()下游的所有子元素都设置为<html>。

我的CSS是这样的：

window.scrollTo()

Answer 17

如果window.scrollTo(x,y)在浏览器的控制台上不起作用，并且dom在滚动后呈现，则可以使用它。

要滚动 Splash 或任何 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);"))

Answer 18

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

接下来，如果您在iframe中滚动，请将您的代码放在与帧源相同的页面上。这样你就不必担心在另一个窗口中获取文档或特定元素，这可能很棘手。哦，是的，你确定你的那部分是正确的吗？通过Firebug逐步完成可以帮助您。

最后，在应该导致滚动发生的行上放置一个断点（使用Firebug）。它是否达到了断点？如果没有，您的代码不会执行，滚动不是您的问题。

（我使用your earlier question的支持上下文回答了这个问题。）

编辑：

滚动按窗口完成。如果您处于无法滚动的框架中，则不会滚动任何内容。如果希望滚动框架中的元素，请将该元素的偏移量添加到其当前窗口，并将其添加到包含框架的偏移量中。这应该可以解决问题。

Answer 19

拿这个代码： http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollToExample.htm 并保存为html文件。请注意它如何硬编码比浏览器视口大的div。您可能需要在页面底部添加内容，以便滚动甚至工作。

Answer 20

很明显，如果您的网页至少（viewport.height - 800）很高，它就不会滚动。你看到滚动条吗？否则你做错了。

JavaScript scrollTo方法什么都不做？

20 个答案: