Question

el.scrollIntoViewIfNeeded()如果不在可见浏览器区域内，则滚动到el。一般情况下它工作正常但我在使用固定标题时遇到问题。

我做了一个示例代码段:(该方法在Firefox中不起作用，因此演示也没有）https://jsfiddle.net/ahugp8bq/1/

在开始时，所有三个彩色div都显示在固定标题下方。但是如果你点击＆＃34;第二个＆＃34;然后＆＃34;首先＆＃34;，#first的开头将在标题后面，我不想要。

问题似乎是向上滚动时#otherContainer（padding-top）的位置几乎被忽略了。

Answer 1

实际上，如果你使用一致且受支持的var header = document.getElementById('container') var clicks = document.querySelectorAll('#container li'); var content = document.querySelectorAll('#otherContainer > div'); // Turn the clicks HTML NodeList into an array so we can easily foreach Array.prototype.slice.call(clicks).forEach(function(element, index){ element.addEventListener('click', function(e){ e.preventDefault(); // Set the scroll to the top of the element (top + scroll) minus the headers height document.body.scrollTop = content[index].getBoundingClientRect().top + document.body.scrollTop - header.clientHeight; }); });方式，这很简单 - 你现在要做的就是减少它的标题，所以只需得到它并计算它的高度。

#container {
  position: fixed;
  background: yellow;
  width: 100%;
  height: 50px;
}

ul li {
  display: inline;
  cursor: pointer;
}

#otherContainer {
  padding-top: 60px
}

#first, #second, #third {
  height: 500px
}

#first {
  background: red
}

#second {
  background: green
}

#third {
  background: blue
}

<div id="container">
    <ul>
      <li id="jumpToFirst">first</li>
      <li id="jumpToSecond">second</li>
      <li id="jumpToThird">third</li>
    </ul>
</div>
<div id="otherContainer">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</div>

el.scrollIntoViewIfNeeded（）滚动得太远了

1 个答案: