css属性
1 .content-visibility:auto.content-visibility是一个css属性，它控制一个元素是否呈现其内容，能让用户潜在地控制元素的呈现。用户可以使用它跳过元素的呈现(包括布局和绘制)，直到用户需要为止，让页面的初始渲染得到极大的提升.css属性实现虚拟列表,但是框架渲染的话,好像这个没啥用.
2 .will-change:当我们通过某些行为（点击、移动或滚动）触发页面进行大面积绘制的时候，浏览器往往是没有准备的，只能被动使用CPU去计算与重绘，由于没有事先准备，应付渲染够呛，于是掉帧，于是卡顿。而will-change则是真正的行为触发之前告诉浏览器：“浏览器同学，我待会儿就要变形了，你心理和生理上都准备准备”。于是乎，浏览器同学把GPU给拉上了，从容应对即将到来的变形。
1 will-change:scroll-position
js方面
1 .变化的属性使用animeJs来实现,有阻尼感,类似于betterScroll的操作
const calculateRange = () => {
const container = getTargetElement(containerTarget);
const wrapper = getTargetElement(wrapperTarget);
if (container && wrapper) {
const { scrollTop, clientHeight } = container;
const offset = getOffset(scrollTop);
const visibleCount = getVisibleCount(clientHeight, offset);
const start = Math.max(0, offset - overscan);
const end = Math.min(list.length, offset + visibleCount + overscan);
const offsetTop = getDistanceTop(start);
wrapper.style.height = totalHeight - offsetTop + 'px';
wrapper.style.marginTop = offsetTop + 'px';
//这里要使用渐变
setTargetList(
list.slice(start, end).map((ele, index) => ({
data: ele,
index: index + start,
})),
);
}
};
3 .useScroll获得值,需要渐变,也就是正常我们每次滚动,都有最小值.所以才会出现滚动不连贯的问题,要让这个值不是间隔的加,而是顺序的加
4 .scroll-behavior:smooth.当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,属性 scroll-behavior 为一个滚动框指定滚动行为
手动导航：很容易想到的是锚点跳转
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<scroll-container>
<scroll-page id="page-1">1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>
CSSOM：例如scrollX、scrollTop、scrollLeft等 Dom 属性发生改变的时候也会受到影响
scroll-behaviour表现
可以看到加了behaviour的css属性,确实是出现了渐进增加的表现
scrollTop效果
//可以看到加了scroll-bahaviour的div,scroll的时候确实滚动有缓慢的趋势.
5 .问题:这里只是会缓动开始和结束的时候,中间的时候是不会的
window.addEventListener('wheel',(e)=>{
console.log('wheel',e)
ref.current.scrollTop+=100
})
//这算是一种最简单的优化
6 .想要实现列表滚动的平滑滚动,还是要自己操作.检测鼠标wheel操作
1 .如果我们给document绑定touchmove或者touchstart事件的监听器，这个passive是会被默认设置为true以提高性能
2 .想要阻止默认的滑动操作,自己改他的值
实现
1 .就算是把这个持续时间变得很短,无论怎么搞,都会有延迟.其实想做的就是对两次的做插值.会抖动
const anim=anime({
targets:innerRef.current,
translateY:target,
duration:5,
easing:'linear',
delay:0,
})
//也就是说他无法支持一些高精度的操作
function createAnim(current,target){
console.log(current,target,'前往的位置')
let value
if(target>current){
value=target-current
console.log('1',value,target)
setAnimState(1)
const anim=anime({
targets:innerRef.current,
translateY:{
value:`+=${value}`
},
duration:100,
easing:'linear',
delay:0,
complete:function(){
console.log('完成',target)
currentHeight.current=target
setAnimState(0)
if(target>currentHeight.current){
console.log('下一次动画')
createAnim(target,currentHeight.current)
}
}
})
}else{
value=current-target
console.log('2',value)
const anim=anime({
targets:innerRef.current,
translateY:{
value:`-=${value}`
},
duration:100,
easing:'linear',
delay:0,
complete:function(){
currentHeight.current=target
setAnimState(0)
if(target<currentHeight.height){
}
}
})
}
}
2 .用requestAnimationFrame实现下试试吧.
3 .tween.js实现一下
image.png
1 .最小的粒度操作,他是有时间概念的,一秒内,这么多距离,每次的距离还都不是固定的.滚轮滚动最小都会触发30次操作,滚动90px的高度
2 .拖拽是连续的,所以可以实现丝滑操作.如果每一个小项的高度>=90,看起来就不会那么怪,可以滚一下,切换一个项,小的就不行
3 .要想丝滑应该是这样,第一次滑动的时候,就让他立马开始运动40px,之后再检测下一步的距离
4 .默认不是从0开始的.
image.png
//tween的
image.png
//linear创建出来的补间动画也不是1px,1px的变化.5px.看起来,肉眼时别的
网友评论