黑松山资源网 Design By www.paidiu.com
背景
今天写需求的时候发现一个小的优化点:用户选择了一些数据之后, 对应列表中的数据需要高亮, 有时候列表很长, 为了提升用户体验,需要加个滚动, 自动滚动到目标位置。
简单的处理了一下, 问题顺利解决, 就把这个小技巧分享一下给大家。
正文
有几种不同的方式来解决这个小问题。
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
, 问题完美解决。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览
- 战锤40K星际战士2突击职业介绍|突击职业技能效果一览
- [妙音金曲]群星《悲情咖啡屋》(黑胶)2CD[DTS-WAV]
- 阿兰·达瓦卓玛《A-Lan阿兰唯美歌姬》2CD[DTS-WAV]
- 【小提琴】陈立新《思乡曲》2004[FLAC+CUE]
- 《战地》新作明年初大规模测试!EA已内部测试一年
- 《GTAOL》PC版时隔多年更新反作弊!小助手宣布跑路
- EA称AI是其业务核心!能提高开发效率、节约成本
- 卫华.1990-太阳升【BMG】【WAV+CUE】
- 呼吸乐队.1992-THEBREATHING【深飞】【WAV+CUE】