window.scrollTo() 不适用于溢出和 100vh 高度

假设我有一个这样的HTML设置，我想做一个scrollTo按钮，因为我读到scrollTo不能与height: 100vh和overflow: auto一起工作

我应该如何解决这个问题?

注意: TBH我在Reactjs上工作，我的JSX文件或多或少看起来像这个HTML设置

.big-container {
height: 100vh
}
.small-container {
overflow: auto;
height: calc(100vh-300px)
}
.smaller-container {
overflow: auto
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="big-container">
<div class="small-container">
<div class="smaller-container">
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</div>
</div>
</body>
</html>

它的工作

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="big-container">
<div class="small-container">
<div class="smaller-container">
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<button onclick="scrollWindow()">
Scroll
</button>
</div>
</div>

</body>
</html>

.big-container {
height: 100vh
}
.small-container {
overflow: auto;
height: calc(100vh-300px)
}
.smaller-container {
overflow: auto
}

function scrollWindow(){
window.scrollTo(0,200)
}

我不知道这是否是完美的解决方案，但我已经通过使用以下方法解决了同样的问题。

在我的情况下，文档的<main>标签有溢出-自动，但当我使用window.scrollTo，然后我猜它是指主窗口，但溢出只局限于<main>标签，所以我认为指示元素直接

const main = document.getElementsByTagName("main");
main[0]["scrollTop"] = 0;

我有唯一的主标签，这就是为什么它返回索引为0的单条目，尝试通过唯一标识找到元素，在获得该元素后，我将scrollTop设置为0以便能够向上滚动到顶部

在你的例子中，试着把实际内容为children的元素的class

onClick={()=>{const element =
document.getElementsByClassName("smaller-container");
element[0]["scrollTop"] = 0;}}

:)如果你能做出更好的解决方案请编辑。Coading快乐!

相关内容

最新更新

热门标签：