javascript - scrollIntoView() 不工作 : does not taking in account fixed element

Question

我正在尝试使用 scrollIntoView()在我的应用程序中，但是因为我有一个顶部固定栏，所以当我使用 scrollIntoView() 时，元素将滚动到固定栏的后面。

这意味着当我尝试让一些元素对用户可见时，通过将元素滚动到可见区域，它会被滚动，但滚动到另一个不可见区域，即这个固定栏。

下面是我正在尝试做的一个例子:

let element = document.getElementsByClassName('second-element')[0];
element.scrollIntoView();

.fixed-element{
  height: 30px;
  width: 100%;
  background-color:black;
  position:fixed;
}

.parent-element {
   width: 100%;
   height: 40000px;
   background-color:blue;
}

.element {
   width: 100%;
   height:100px;
   background-color: yellow;
   margin-top:10px;
}

.second-element{
   width: 100%;
   background-color: red;
   height:200px;
}

<div class="fixed-element"></div>
<div class='parent-element'>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='second-element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
</div>

有什么方法可以使滚动元素不会因为固定栏而变得不可见？

我想要一个普通的 JavaScript 解决方案。此外，只有在可能的情况下，才需要一个不需要知道任何固定元素是否存在的解决方案。

Answer 1

您可以使窗口scrollTo x 位置0 和y 位置元素的offsetTop 减去固定元素的offsetHeight.

JSFiddle 你的代码:http://jsfiddle.net/3sa2L14k/

.header{
  position: fixed;
  background-color: green;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}
html, body{
  height: 1000px;
}

#toBeScrolledTo{
  position: relative;
  top: 500px;
}

<div class="header">
Header
</div>
<div id="toBeScrolledTo">
Text Text Text
</div>
<script>
window.scrollTo(0, document.getElementById('toBeScrolledTo').offsetTop - document.getElementsByClassName('header')[0].offsetHeight);
</script>