Javascript scrollIntoView() 不起作用：不考虑固定元素

scrollIntoView() is not working: does not taking in account fixed element

提问by Ricardo Rocha

I'm trying to use scrollIntoView()in my application, but because I have a top fixed bar, when I use the scrollIntoView(), the elements will be scroll to the fixed bar back.

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

This means that when I try to put some element visible to the user, by scrolling the element to a visible area, it will be scrolled, but to another invisible ate that is were this fixed bar is.

这意味着当我尝试将某些元素对用户可见时，通过将元素滚动到可见区域，它将被滚动，但会滚动到另一个不可见的区域，即此固定条所在的位置。

Follows an example of what I'm trying to do:

遵循我正在尝试做的一个例子：

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>

There is any way that I could use this function in a way that the scroll elements not became invisible because of the fixed bar?

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

I would like a vanilla JavaScript solution. Also, and only if it is possible, a solution that doesn't need to know the existent of any fixed elements.

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

采纳答案by hev1

You can make the window scrollTox position 0and y position the element's offsetTopsubtracted by the fixed element's offsetHeight.

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

JSFiddle with your code: http://jsfiddle.net/3sa2L14k/

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>

回答by Mamad

Your question is answered in this 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);
}

Also you can use this way:

您也可以使用这种方式：

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'})

Source: https://github.com/iamdustan/smoothscroll/issues/47

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