背景
今天写需求的时候发现一个小的优化点：用户选择了一些数据之后, 对应列表中的数据需要高亮， 有时候列表很长， 为了提升用户体验，需要加个滚动， 自动滚动到目标位置。简单的处理了一下， 问题顺利解决， 就把这个小技巧分享一下给大家。
正文
有几种不同的方式来解决这个小问题。
1.scrollTop
第一想到的还是scrollTop, 获取元素的位置， 然后直接设置:
// 设置滚动的距离
element.scrollTop = value;
不过这样子有点生硬， 可以加个缓动：
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)
jquery 中重的animate 方法也可以实现类似的效果：
$('xxx').animate({
scrollTop: 0
});2. scroll-behavior
把 scroll-behavior:smooth; 写在滚动容器元素上，也可以让容器（非鼠标手势触发）的滚动变得平滑。
.list {
scroll-behavior: smooth;
}
在PC上, 网页默认滚动是在<html>标签上的，移动端大多数在<body> 标签上, 那么这行定义到全局的css中就是:
html, body {
scroll-behavior:smooth;
}美滋滋。
3. scrollIntoView
Element.scrollIntoView() 方法, 让当前的元素滚动到浏览器窗口的可视区域内。
语法:
var element = document.getElementById("box");
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
scrollIntoView 方法接受两种形式的值：
- 布尔值
如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
- 相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
- 相应的scrollIntoViewOptions: { block: "end", inline: "nearest" }。
- Options 对象
{
behavior: "auto" | "instant" | "smooth", 默认为 "auto"。
block: "start" | "end", 默认为 "start"。
inline: "start"| "center"| "end", | "nearest"。默认为 "nearest"。
}
- behavior表示滚动方式。auto表示使用当前元素的scroll-behavior样式。instant和smooth表示直接滚到底和使用平滑滚动。
- block表示块级元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说，就是竖直方向。start表示将视口的顶部和元素顶部对齐；center表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；nearest表示就近对齐。
- inline表示行内元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb来说，就是水平方向。其值与block类似。
scrollIntoView 浏览器兼容性
最后我用的是 scrollIntoView, 问题完美解决。
BetterScroll移动端滚动场景的应用
BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件，有下列功能支持滚动列表，下拉刷新，上拉刷新，轮播图，slider等功能。better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。
css隐藏滚动条_基于webkit内容隐藏滚动条的方法总汇
基于webkit内容隐藏滚动条,核心代码是：overflow的值需要设置为auto或者scroll，然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0。
原生js判断加载更多事件，通过获取页面滚动距离、文档总高度、浏览器视口高度
原生js获取滚动条在Y轴上的滚动距离、获取文档的总高度、获取浏览器视口的高度的方法实现，用于判断页面加载数据。
基于iScroll实现内容滚动
iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。
js+css 实现 滚动条滑动时显示，不滑动时隐藏
把原有的滚动条隐藏，创建个新的滚动条，并拓展其宽度，达到隐藏的效果,而判断滚动条是否滚动，保存原有的滚动条到顶部的距离，看是否发生改变，做出相应的判断。
js如何实现滚动到一定位置将内容固定在页面顶部
window.onscroll为滚轮监听，document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值，原因不明，若为0则会跟上方有空隙。左右位置虽然是0也要设，不然若为不是100%宽度的内容会出现左右跳动。
无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动
这篇文章主要介绍使用js实现文字无间歇性上下滚动，一些网站的公告，新闻列表使用的比较多，感兴趣的小伙伴们可以参考一下
原生js获取浏览器获X轴，Y轴的滚动距离
在前端开发中，需要获取浏览器滚动距离的需求，这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴，Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识，希望对你有所帮助。
js实现返回顶部效果的方法总结
当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个返回顶部的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。
使用CSS实现无滚动条滚动
我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题，但是并不能很好的解决我们的问题，那么怎么办呢？
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!