小弟是菜狗一枚,记录一波页面回滚到顶部的顺滑效果。如果有更好的实现方法可以发起评论一起分享分享哦~
1.实现页面滑动到底部需回滚到顶部的效果
使用window.xxx方法对是页面的可视区域进行滚动,不会使抽屉组件一并滚动至顶部。此方式是通过递归调用的方式平滑滚动实现,其实也可以用behavior: "smooth"去实现平滑滚动
toTop() {
let gotoTop = function() {
let drawerPosition =
document.documentElement.scrollTop || document.body.scrollTop;
drawerPosition -= 10;
if (drawerPosition > 0) {
window.scrollTo(0, drawerPosition);
} else {
window.scrollTo(0, 0);
clearInterval(timer);
timer = null;
}
};
var timer = setInterval(gotoTop, 1);
}
2.实现抽屉组件内容滑动到底部回滚到顶部时的效果
为了实现抽屉组件的滚动。那么要先取到抽屉组件内容里的元素哦~~
使用behavior: "smooth"属性滑动的过程得非常顺溜。
//js部分
toTop() {
const drawerPositon = document.getElementById("drawer");
drawerPositon.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
}
// html部分
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
>
<div id="drawer">
....我是内容....
。。。好多好多的内容 。。。
</div>
</Drawer>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。