background
Today it was found written demand to optimize a small point: After the user selects some of the data, the data corresponding to the list to highlight the need, sometimes the list is very long, in order to enhance the user experience, we need to add a scroll, scroll automatically to the target location. Simple handling a bit, successfully resolved the problem, put the tips to share for everyone.
text
There are several different ways to solve this little problem.
1.scrollTop
The first thought was scrollTop, get the elements of position, then set directly:
// 设置滚动的距离
element.scrollTop = value;
But this child a little stiff, you can add easing:
var scrollSmoothTo = function (position) {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
return setTimeout(callback, 17);
};
}
// 当前滚动高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 滚动step方法
var step = function () {
// 距离目标滚动距离
var distance = position - scrollTop;
// 目标滚动位置
scrollTop = scrollTop + distance / 5;
if (Math.abs(distance) < 1) {
window.scrollTo(0, position);
} else {
window.scrollTo(0, scrollTop);
requestAnimationFrame(step);
}
};
step();
};
// 平滑滚动到顶部，可以直接：
scrollSmoothTo(0)
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
The heavy jQuery animate method can also achieve a similar effect:
$('xxx').animate({
scrollTop: 0
});
2. scroll-behavior
The scroll-behavior: smooth; written on the scroll container element, but also allows container (non-mouse gesture triggers) become smooth scrolling.
.list {
scroll-behavior: smooth;
}
On the PC, the default page is scrolled, the most moving end on the label, then this line is defined on the label in the global css is:
html, body {
scroll-behavior:smooth;
}
Alacrity.
3. scrollIntoView
Element.scrollIntoView () method, so that the elements of the current scroll to the visible area of the browser window.
grammar:
var element = document.getElementById("box");
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
scrollIntoView method takes two forms of values:
- Boolean value
-
If true, the top element and it will align to the top of the visible area of the scroll area.
- Corresponding scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value for this parameter.
-
If false, the bottom end of the element and it is aligned at the bottom of the visible area of the scroll area.
- Corresponding scrollIntoViewOptions: {block: "end", inline: "nearest"}.
- Options object
{
behavior: "auto" | "instant" | "smooth", 默认为 "auto"。
block: "start" | "end", 默认为 "start"。
inline: "start"| "center"| "end", | "nearest"。默认为 "nearest"。
}web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
- behavior represents a rolling basis. auto indicates the use of scroll-behavior pattern of the current element. instant and smooth represents a direct roll in the end and use smooth scrolling.
- block represents the block elements arranged in a direction to scroll to the position. For the default writing-mode: horizontal-tb, it is the vertical direction. start indicates the top and bottom of the viewport is aligned elements; Center represents the intermediate element and the viewport is aligned intermediate; end represents the alignment of the top and bottom elements of the viewport; Nearest represents the nearest alignment.
- inline element row represents the arrangement direction to scroll to the position. For the default writing-mode: horizontal-tb, it is the horizontal direction. Similar to the block value.
scrollIntoView Browser Compatibility
Finally, I use the scrollIntoView, problem perfect solution.