I noticed scrollIntoView
has some new options since last I looked.
Namely, block
and inline
. What's the difference between these two? I'm guessing {block: "start"}
will align the top of the element with the top of the page, but I'm not sure how that would be different from inline
, or how you would use both these options simultaneously?
The block
option decides where the element will be vertically aligned inside the visible area of its scrollable ancestor:
{block: "start"}
, the element is aligned at the top of its ancestor.{block: "center"}
, the element is aligned at the middle of its ancestor.{block: "end"}
, the element is aligned at the bottom of its ancestor.{block: "nearest"}
, the element:
The inline
option decides where the element will be horizontally aligned inside the visible area of its scrollable ancestor:
{inline: "start"}
, the element is aligned at the left of its ancestor.{inline: "center"}
, the element is aligned at the centre of its ancestor.{inline: "end"}
, the element is aligned at the right of its ancestor.{inline: "nearest"}
, the element:
Both block
and inline
can be used at the same time to scroll to a specified point in one motion.
Check out the following snippet to see how each works in action.
Snippet:
/* ----- JavaScript ----- */
var buttons = document.querySelectorAll(".btn");
[].forEach.call(buttons, function (button) {
button.onclick = function () {
var where = this.dataset.where.split("-");
document.querySelector("div#a1").scrollIntoView({
behavior: "smooth",
block: where[0],
inline: where[1]
});
};
});
/* ----- CSS ----- */
body {
padding: 500px;
width: 2000px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100;
}
div#a1 {
width: 1000px;
height: 300px;
background: url(//www.w3schools.com/css/trolltunga.jpg);
background-repeat: no-repeat;
}
<!----- HTML ----->
<header>
<button class="btn" data-where="start-start">T-L</button>
<button class="btn" data-where="start-center">T-C</button>
<button class="btn" data-where="start-end">T-R</button>
<button class="btn" data-where="center-start">C-L</button>
<button class="btn" data-where="center-center">C-C</button>
<button class="btn" data-where="center-end">C-R</button>
<button class="btn" data-where="end-start">B-L</button>
<button class="btn" data-where="end-center">B-C</button>
<button class="btn" data-where="end-end">B-R</button>
</header>
<div id = "a1"></div>