scrollIntoView（）不起作用：不考虑固定元素

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>

Answer 2

此link中回答了您的问题。

var node = 'select your element';
var yourHeight = 'height of your fixed header';

// scroll to your element
node.scrollIntoView(true);

// now account for fixed header
var scrolledY = window.scrollY;

if(scrolledY){
  window.scroll(0, scrolledY - yourHeight);
}

您也可以使用这种方式：

let item = // what we want to scroll to
let wrapper = // the wrapper we will scroll inside
let count = item.offsetTop - wrapper.scrollTop - xx // xx = any extra distance from top ex. 60
wrapper.scrollBy({top: count, left: 0, behavior: 'smooth'})

来源：https://github.com/iamdustan/smoothscroll/issues/47

Answer 3

尝试滚动填充。它不是JavaScript解决方案（它是CSS属性），但是可以解决您的问题。

MDN
CSS Tricks

Answer 4

一个很棒的简单解决方案（受link中Sanyam Jain的评论启发）是使用{block: 'center'}来使选择垂直居中，如下所示：

scrollIntoView({block: 'center'})

编辑-我在MDN页面上不幸地发现此功能是“实验性的-不应在生产中使用”。另外，IE不支持它（如果需要）。