The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

Question

The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

el.scrollIntoViewIfNeeded() function is used to scroll to element el if it's not within the visible browser area. Although it generally works well, I have encountered some issues when trying to use it with a fixed header.

I have provided an example snippet here: (Please note that this method does not work in Firefox, so the demo will not work either) https://jsfiddle.net/ahugp8bq/1/

Initially, all three colored divs are displayed below the fixed header. However, if you click on "second" and then "first", the beginning of #first goes behind the header, which is not the desired behavior.

The issue appears to be related to the position of #otherContainer and how its padding-top is being ignored while scrolling up.

javascript html css scroll

Answer 1

Answer №1

It's actually quite straightforward if you follow the recommended method of using

getBoundingClientRect().top + body.scrollTop

- simply subtract the header height from it to achieve the desired result.

var header = document.getElementById('container')
var clicks = document.querySelectorAll('#container li');
var content = document.querySelectorAll('#otherContainer > div');

// Convert clicks HTML NodeList into an array for easy iteration
Array.prototype.slice.call(clicks).forEach(function(element, index){
  element.addEventListener('click', function(e){
    e.preventDefault();
    // Adjust the scroll position to bring the element to the top minus the header 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>

Answer 2

It's actually quite straightforward if you follow the recommended method of using

getBoundingClientRect().top + body.scrollTop

- simply subtract the header height from it to achieve the desired result.

var header = document.getElementById('container')
var clicks = document.querySelectorAll('#container li');
var content = document.querySelectorAll('#otherContainer > div');

// Convert clicks HTML NodeList into an array for easy iteration
Array.prototype.slice.call(clicks).forEach(function(element, index){
  element.addEventListener('click', function(e){
    e.preventDefault();
    // Adjust the scroll position to bring the element to the top minus the header 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>

The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

Answer №1

Similar questions

Error: The background image is not displaying correctly on the .net webpage

Ways to terminate a looping function in jquery

Reorder the nested list structure

Is it feasible to utilize math.max with an array of objects?

Ways to make a jsonp request without including the 'callback' in the URL

When initializing a new Date object with a number versus a string, the resulting values will vary

What is the best way to adjust a Checklist's width to match the width of its parent Dropdown in Dash Plotly?

Assign a background image to a master page utilized in subdirectories

Mobile version experiencing issue with Navbar not collapsing

Creating a dynamic dropdown list with PHP and AJAX using JQuery

Angular - Dividing Functionality into Multiple Modules

What could be causing my array to be misconverted into JSONP data?

Is it possible to include additional details in a hyperlink so that clicking on it automatically populates the forms on the webpage?

There was a problem with the ajax request

Creating an image gallery with animated effects: A step-by-step guide

How can we improve our vertical division method?

Is the hover effect malfunctioning, even though the correct style has been applied?

Error: The TVJS Framework encountered a JSON Parse issue due to an unexpected EOF

What is the purpose of requiring the explicit invocation of app.listen(port) to enable express-ws to function properly?

A comprehensive guide to leveraging synchronous execution of setTimeout in JavaScript