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

Question

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.

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.

Unmitigated · Accepted Answer · 2018-08-01T15:57:21.357

You can make the window scrollTo x position 0 and y position the element's offsetTop subtracted by the fixed element's offsetHeight.

JSFiddle with your code: 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>

score 8 · Answer 2 · answered Jul 31 '18 at 17:25

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

The second approach is the shortest and simplest to use. – Ashish Singh Feb 17 '20 at 20:49 — Ashish Singh, Feb 17 '20 at 20:49

java-addict301 · Answer 3 · 2023-08-30T19:12:33.533

4

A great simple solution (inspired by Sanyam Jain's comment in this [link][1]) is to use {block: 'center'} to vertically center the selection like this:

scrollIntoView({block: 'center'})

edited Aug 30 '23 at 19:12

answered Dec 10 '20 at 21:32

java-addict301

3,220
2
25
37

score 1 · Answer 4 · answered Aug 11 '20 at 13:33

1

Try scroll padding. It is not a JavaScript solution (it is a CSS property) but it can be helpful with your problem.

MDN
CSS Tricks

answered Aug 11 '20 at 13:33

אלחנן בעל-שם

21
2

this is not supported in IE unfortunately – java-addict301 Dec 10 '20 at 20:47
Good call to use scroll-padding. Not referenced in scrollIntoView docs. – Llama D'Attore Feb 05 '21 at 10:20

score -2 · Answer 5 · edited May 16 '23 at 04:43

-2

//React
cardRef.current.scrollIntoView(true);

worked for me

edited May 16 '23 at 04:43

Suraj Rao

29,388
11
94
103

answered May 16 '23 at 04:27

Anup Biswas

27
3

If you want to add an answer almost five years after the question was originally answered be sure that it adds context or further detail to the accepted answer. Saying that the OP's originally attempted code worked for you only serves to add noise. – Mike Devenney May 17 '23 at 14:38

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

5 Answers5