Scroll an element into the center of the viewport

Published 2018-12-10 front-end
by Hidde de Vries

Say your page displays a list of names and you want a certain person to be highlighted and scrolled into view. There’s a browser API for that: Element.scrollIntoView(), which scrolls an element into view.

Element.scrollIntoView() can take two types of elements: a boolean or an object. The object argument gives developers more control over how elements ‘in view’ are aligned, but has slightly less browser support. Let’s look at what we can do with both.

The boolean argument

Say, you have a couple of people in a list:

<ul>
  <li id="alice">Alice Cruz</li>
  <li id="daniel">Daniel Ho</li>
  …
  <li id="julie">Julie Howard</li>
  …
</ul>

(Example on Codepen)

If you want Julie to be scrolled into view, find the relevant element, then call scrollIntoView():

const julie = document.getElementById('julie');

julie.scrollIntoView();

This scrolls the element into view. With a boolean argument, you can have some control over alignment. If you pass true (default), the browser will scroll so that the element is at the top of your viewport or other scrollable element. With false, it scrolls so the element is at the bottom of the viewport:

julie.scrollIntoView(true) // align top
julie.scrollIntoView(false) // align bottom

Note that the underlying terminology is not ‘top’ or ‘bottom‘, I’ll get into that in the next section.

For most use cases, this boolean argument may be all you need. It lets you choose if you want the element to align top or bottom.

This isn’t always ideal, sometimes you may have a sticky header, so scrollling an element to the top of the document would not actually get it into view. If something like that is the case in your project, the object argument comes in handy. It gives more control over alignment and allows for smooth scroll.

The object argument

In the latest version, you can also pass Element.scrollIntoView() an object, which lets you set two things:

  • should it scroll smoothly or jump instantly?
  • how should the element align along the block and inline axes?
julie.scrollIntoView({
  behavior: "smooth" | "auto";
  block: "start" | "center" | "end" | "nearest";
  inline: "start" | "center" | "end" | "nearest";
});

Smooth scroll

With the behavior parameter, you can set whether scrolling should be instant, so the page just jumps to the element, or smoothly, over a number of seconds (to be decided by the browser).

Unsurprisingly, the "smooth" value triggers smooth scroll. The "auto" value triggers instant scroll, as long as the element’s computed value for the scroll-behavior in CSS is not "smooth".

Alignment

Where I’ve been saying ‘top’ and ‘bottom’, I should have said ‘start‘ or ‘end’. They are the logical properties that you might recognise from other recent CSS specs like Grid Layout and flexbox.

As a quick reminder, the inline direction is the direction in which your text runs: it is the direction in which the words of this article are added. The block direction is the opposite of that, it is where block level elements are stacked, or where paragraphs of this text are added.

In a page with a vertical scrollbar, on the block axis, start means top, end means bottom. That’s the case on this page, for instance. But if your page uses vertical writing mode, you’d scroll horizontally, like in Hui-Jing Chen’s example of Chinese typography; in those cases, start means right, end means left on the block axis.

Fallbacks can be tricky

All browsers that understand element.scrollIntoView() accept the boolean argument. But only some accept the object argument. The good thing is, browsers will fallback for you. The default for the boolean argument is true, which sets the equivalent to block: start. If you use the object argument to use block: center or block: end, browsers that don’t do the object argument, will regard the argument to be true (because objects are truthy). So you’ll end up with block: start in those browsers. That’s often great, except when it is the opposite of what you’re fallbacking for.

If your interface requires precisely control over scroll alignment, fallbacks can be tricky. As an alternative you can also roll your own alignment with element.scrollTo(), as Jan Hoogeveen pointed out (thanks Jan!). If you end up going for that, I would recommend using coordinates as an argument, as the object argument does not work in some recent browsers, including Edge. See also window.scrollTo on MDN.

In the works: scroll snap

If you find scrollIntoView interesting, you may be interested in Scroll Snap, too. This is new CSS, currently being worked on, which lets you define things like a padding for the scroll container. Rachel Andrew has written a guide on the basic concepts of Scroll Snap on MDN. Some of the properties are already available in some browsers.

Comments, likes & shares (3)

bởi Hoàng Văn wrote on 30 March 2023:

You are looking for information on the topic “ScrollIntoView scrolls into different section depending on the page it’s triggered from”. dongphuchoangvan.com will gather information to answer your questions in this article. Please read this article to the end to find the information you want to see. You can also check out some other related articles here: https://dongphuchoangvan.com/blog/ react-scroll to different page, react change page and scroll to element, react-scroll to element, react-router-hash-link, scrollIntoView not working, scrollIntoView offset.

View information about the ScrollIntoView scrolls into different section depending on the page it’s triggered from

Information about this question

  • Question: ScrollIntoView scrolls into different section depending on the page it’s triggered from
  • Time: Updated 3 days ago
  • Modified: Asked 148 hours ago
  • View: 17401

ScrollIntoView scrolls into different section depending on the page it’s triggered from

The scrollIntoView method scrolls the element into view, meaning it makes sure that the element is visible within its container, if it’s not already. The behavior of scrollIntoView depends on the location of the element relative to the viewport and its container.

If the element is already visible within its container, scrollIntoView won’t do anything. If the element is outside the container’s visible area, the method will scroll the container so that the element is visible.

However, if the container itself is not visible on the page, for example, if it’s inside a hidden element or an element with display:none, scrollIntoView won’t work as expected. In this case, you’ll need to make the container visible first before calling scrollIntoView.

Also, if the element is inside a container with overflow scrolling and there are other elements above or below it that extend beyond the container’s visible area, the container may scroll so that those elements are visible instead of the target element. To avoid this, you can try setting the behavior option to "smooth" so that the scroll is animated and more controlled.

In summary, scrollIntoView behavior depends on the element’s relationship with its container and the container’s visibility on the page. If the container is hidden or if there are other elements that extend beyond the container’s visible area, the scroll may not work as expected.

Watch videos related to “ScrollIntoView scrolls into different section depending on the page it’s triggered from”

The \”scroll\” event in JavaScript | window.onscroll

How does scroll into view work?

scrollIntoView() is a JavaScript method that is used to scroll a particular element into view within its container. When called on an element, it causes the container to scroll so that the element is visible to the user.

Here is how scrollIntoView() works:

  1. The method is called on the element that needs to be scrolled into view. For example, if you have a button at the bottom of a long webpage, you can call button.scrollIntoView() to scroll the button into view.

  2. The browser calculates the position of the element relative to the container. This calculation takes into account the element’s dimensions, its position within the container, and any margins or padding applied to the container or the element itself.

  3. The browser then scrolls the container so that the element is in view. If the element is already visible, the method does nothing.

  4. If the container is an element with a scroll bar, the method will cause the container to scroll. If the container does not have a scroll bar, the method will scroll the entire page if necessary to bring the element into view.

Overall, scrollIntoView() is a useful method that can help improve the user experience of a web page by automatically scrolling to the relevant content.

Which of the following JavaScript function helps in scrolling until a particular element is in fully visible?

The JavaScript function that helps in scrolling until a particular element is fully visible is scrollIntoView().

This function is called on the element that you want to scroll into view, and it scrolls the page until that element is in fully visible. Here is an example:

javascript// Get the element that you want to scroll to
const element = document.getElementById('myElement');

// Scroll to the element
element.scrollIntoView();

This will scroll the page until the myElement element is in fully visible. You can also pass an optional options object to the scrollIntoView() function to customize the scrolling behavior.

How to scroll into view using JavaScript?

To scroll into view using JavaScript, you can use the scrollIntoView() method, which is available on most DOM elements. This method scrolls the element into view, making it visible within its containing element or the viewport.

Here’s an example code snippet that demonstrates how to scroll a specific element into view:

javascript// Get a reference to the element you want to scroll to
const myElement = document.getElementById('my-element');

// Call the scrollIntoView() method on the element
myElement.scrollIntoView();

This will scroll the myElement into view, making it visible on the screen.

You can also use the scrollIntoView() method with options to customize the scrolling behavior. For example, you can specify whether you want the scrolling to be smooth or instant, or you can specify an alignment option to control where the element is positioned within its containing element. Here’s an example that uses options:

javascript// Get a reference to the element you want to scroll to
const myElement = document.getElementById('my-element');

// Call the scrollIntoView() method with options
myElement.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'nearest'
});

In this example, the behavior option is set to smooth, which causes the scrolling to be animated instead of instant. The block option is set to start, which positions the element at the top of its containing element. The inline option is set to nearest, which positions the element as close as possible to the center of its containing element along the horizontal axis.

Images related to ScrollIntoView scrolls into different section depending on the page it’s triggered from

Found 13 ScrollIntoView scrolls into different section depending on the page it’s triggered from related images.

Java - Selenium Wrong Scroll Into View - Stack OverflowJava – Selenium Wrong Scroll Into View – Stack Overflow Javascript - How To Show One More Item From Top Or Bottom Of Visible Area With Scrollintoview()? - Stack OverflowJavascript – How To Show One More Item From Top Or Bottom Of Visible Area With Scrollintoview()? – Stack Overflow Javascript - Scrollintoview() Causing The Whole Page To Move - Stack OverflowJavascript – Scrollintoview() Causing The Whole Page To Move – Stack Overflow Adam Argyle On Twitter:Adam Argyle On Twitter: “Using `Scrollintoview()` But It’S Causing The Scrollable Page To Scroll Too? Pass “Nearest” As The Value To Inline And Block Keys In The Scrollintoview Options Object 👍🏻 Learn

You can see some more information related to ScrollIntoView scrolls into different section depending on the page it’s triggered from here

Comments

There are a total of 482 comments on this question.

  • 311 comments are great
  • 508 great comments
  • 189 normal comments
  • 62 bad comments
  • 86 very bad comments

So you have finished reading the article on the topic ScrollIntoView scrolls into different section depending on the page it’s triggered from. If you found this article useful, please share it with others. Thank you very much.