使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画
如何让子元素滚动到指定父窗口的指定位置什么是滚动距离读取滚动距离如何设置滚动scrollTop属性scrollTo方法什么是滚动距离比如父元素设置了overflow: hidden;, 当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离.读取滚动距离<head><title>test</title><style>
如何让子元素滚动到指定父窗口的指定位置
什么是滚动距离
比如父元素设置了overflow: hidden;, 当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离.
读取滚动距离
<head>
<title>test</title>
<style>
ul {
width: 200px;
height: 200px;
background-color: #eee;
overflow: auto;
transition: all 1s linear;
margin-top: 200px;
}
li {
height: 300px;
background-color: skyblue;
list-style-type:none;
}
</style>
</head>
-------------------------------------↓ 结构 ↓-------------------------------------------------------
<ul id="outer">
<li id="insider">
1111111111111111
2222222222222222
3333333333333333
4444444444444444
5555555555555555
6666666666666666
</li>
</ul>
<button onclick="set()">set</button>
--------------------------------------↓ js ↓-----------------------------------------------------
const outEle = document.getElementById('outer');
const insideEle = document.getElementById('insider');
//onscroll事件的处理函数
outEle.onscroll = function readScrollTop() {
console.log('scrollTop:', outEle.scrollTop); // 可以清楚的看到滚动的距离
}
如何设置滚动
scrollTop属性
scrollTop就是指 “元素中的内容” 超出 “元素上边界” 的那部分的高度。
直接给父元素的scrollTop赋值:
function set() {
outEle.scrollTop = 100;
}
这种方法比较直接, 但是因为是直接设置的dom元素的js属性 而不是css属性, 所以想通过这种方法设置过渡动画是没有效果的(transition: all 1s linear; 无效)
补充: 有时会出现设置scrollTop无效 一直为0的情况, 出现这种现象的原因之一就是内容已经到底了, 在滑滑不上去了…
scrollTo方法
scrollTo()方法可以使界面滚动到给定元素的指定坐标位置。
有两种用法:
方法一: element.scrollTo(x-coord, y-coord)
- x-coord 是期望滚动到位置水平轴上距元素左上角的像素。
- y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。
方法二: element.scrollTo(options)
- options是一个对象:
- left (number类型)
- top(number类型)
- behavior: ‘smooth’ (平滑过渡效果)
scrollTo()的两种方式我们都试试:
function set() {
// 方式一:
outEle.scrollTo(0, 100)
// 方式二:
outEle.scrollTo({top: 100, behavior: 'smooth'})
}
最后, 大家会发现 都产生了效果, 但是方式一没有过度效果, 方式二产生了过度效果, 所以如果对过渡动画有要求的话, 推荐使用第二种方式~!
当然, 需要注意的是: options这种对象的写法 有兼容性方便的限制:
好了, 今天就和大家分享到这里~!
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
23
0- 0
已为社区贡献1条内容
所有评论(0)