先说我现在的方法吧
背景:项目是 react 环境,里面有个滚动数据的功能,没有引入 jquery,个人感觉单独为了一个animate
多引一个 jquery 不划算。
需求:展示获取到的 N 条数据,首屏展示 x 条,每过 t 秒滚动到下一屏。
实现:主要通过两个定时器,animate
控制滚动间隔。Interval
控制从滚动开始到滚动结束时长,代码如下。
目标:实现类似 jqueryanimate
的平滑效果,目前在内层的定时器设置 0.001 秒移动步长±1 像素,在小区域内还行,但是半屏或者全屏的滚动就显得速度慢了,修改增加步长又不平滑,有很明显的段落感。而 jqueryanimate
中就很流畅,所有动画都在 time 内完成。所以想请教下有没有更好的办法实现,或者有什么轻便的 animate 包。
代码:
……
//底部回滚到顶部
scroll = () => {
let dom = document.getElementById('scroll'),
//获取精确值
full = +window.getComputedStyle(dom).height.slice(0, -2),
view = +window.getComputedStyle(dom.parentNode).height.slice(0, -2),
//储存预设 top
top = 0,
//滚动值
scrollTop = 0,
//是否到底部
toTop = false;
function animate(){
top = toTop ? 0 : top - view
let Interval = setInterval(function(){
scrollTop = toTop ? scrollTop + 10 : scrollTop - 1
dom.style.marginTop = scrollTop + 'px'
if(toTop && scrollTop >= top){
toTop = false
dom.style.marginTop = top + 'px'
clearInterval(Interval)
}
if(!toTop && scrollTop <= top){
if(scrollTop - view <= -full) {
toTop = true
}
dom.style.marginTop = top + 'px'
clearInterval(Interval)
}
}, 1);
}
setInterval(animate, 4000)
}
//首尾循环
// scroll = () => {
// let dom = document.getElementById('scroll'),
// //获取精确值
// full = +window.getComputedStyle(dom).height.slice(0, -2),
// view = +window.getComputedStyle(dom.parentNode).height.slice(0, -2),
// li = +window.getComputedStyle(dom.firstChild).height.slice(0, -2),
// //滚动值
// scrollTop = 0,
// //储存 node
// liArr = []
// function animate(){
// //清空
// liArr = []
// //获取一屏的 node
// for (let i = 0; i < Math.ceil(view / li); i++){
// liArr.push(dom.childNodes[i])
// }
// //滚动事件
// let Interval = setInterval(function(){
// scrollTop -= 1
// dom.style.marginTop = scrollTop + 'px'
// //滚动到第二屏
// if(scrollTop <= -view){
// clearInterval(Interval)
// //重置
// scrollTop = 0
// //移动 node
// liArr.map(item => {
// dom.removeChild(item)
// dom.appendChild(item)
// })
// //复位
// dom.style.marginTop = '0px'
// }
// }, 1);
// }
// setInterval(animate, 4000)
// }
……
题外:顺便也可以指导下以上有哪些格式或者代码可以优化的
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.