动画滚动可以用css和js
css：transform：translateY transition：'1s'
`
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
- {
margin: 0px;padding: 0px;
}
up {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
overflow: hidden;
border: 1px solid;
}
side {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
ul li {
list-style: none;
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<div id="up">
<div id="side">
<ul id="side1">
<li>65436654336</li>
<li>99999999999</li>
<li>88888</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
</ul>
</div>
</div>
<script>
setInterval(() => {
let speed = -1
let side = document.getElementById('side')
let side1 = document.getElementById('side1')
side2.innerHTML = side1.innerHTML
if (side) {
side.style.top = side.offsetTop + speed + 'px'
if (side.offsetTop < up.clientHeight - side.scrollHeight) {
side.style.top = '0px'
}
}
},60)
</script>
</body>
</html>
`
`
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
- {
margin: 0px;padding: 0px;
}
/* #up {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
overflow: hidden;
border: 1px solid;
} */
side {
/* position: absolute; */
width: 300px;
height: 300px;
top: 0px;
left: 0px;
overflow: auto;
}
ul li {
list-style: none;
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<div id="up">
<div id="side">
<ul id="side1">
<li>65436654336</li>
<li>99999999999</li>
<li>88888</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
<li>542312354325</li>
</ul>
<ul id="side2"></ul>
</div>
</div>
<script>
let side = document.getElementById('side')
let side1 = document.getElementById('side1')
let side2 = document.getElementById('side2')
side2.innerHTML = side1.innerHTML
setInterval(() => {
if (side.scrollTop >= side2.offsetTop) {
side.scrollTop = 0
} else {
side.scrollTop++
}
}, 60)
</script>
</body>
</html>
`
网友评论