想请教下，自己这段js代码想实现，当滚动的距离小于他的高度时候，就自增10PX向下滚动， 当滚动距离等于他的高度时候，就逐渐自减10px向上移动，这样往复永远循环下去 自己的代码这样写的，只能向下 再向上的时候只能移动一点，怎样可以实现永远上下移动(或是最多只能往返一次，还感觉有卡顿的情况)
2
491 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="NPP-Plugin">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.box {width:300px;height:250px;margin:0 auto; border:1px solid #eee;overflow:auto;}
.box1,.box2{width:250px;height:250px;margin:0 auto;border-radius:250px;}
.box1 {border:1px solid #eee;}
.box2 {border:1px solid yellow;}
</style>
</head>
<body>
<p id="box" class="box">
<p class="box1" id="box1">
</p>
<p class="box2" id="box2">
</p>
</p>
<p id="show" class="show"></p>
<script type="text/javascript">
var box= document.getElementById("box");
var box1= document.getElementById("box1");
var box2= document.getElementById("box2");
var show= document.getElementById("show");
box.onscroll = function(e){
show.innerHTML= box.offsetHeight;
show.innerHTML+='<br/>';
show.innerHTML+=box.scrollTop;
show.innerHTML+='<br/>';
//show.innerHTML+=box.scrollHeight;
};
function gopp(){
if(box.scrollTop<box.offsetHeight){
box.scrollTop+=10; //当滚动的距离小于外面容器高度时候就让他不停的10px递增
}
else{
box.scrollTop -= 10; //当滚动距离大于等于0时，就让他不停的以10PX递减 ，希望能永久这样自己判断的上下移动
}
}
window.setInterval(gopp,500);
function gdn(){
box.scrollTop -= 10;
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你的判断条件是有问题的，最后导致的结果就是会在底部一上一下的运动。
我这里加入了一个标明方向的变量，将代码修改如下，就可以实现你说的上下运动了，如果你想要计算来回次数，在声明一个变量，在
direction变化的时候累加即可。关于解决运动卡顿的问题，不是那么简单就能够说清除的，我模仿jQuery的实现方法，模拟了原生封装运动框架.
并最终保存在了js目录下，你可以去看一看。
你的办法不错哈，多谢分享。 自己再研究研究哈， 自己用下面这个方法 在第三次往后的上下滚动，速度越来越快且卡顿，不知道啥原因
自己试着用下面这样的办法，循环3次以后 ，上下滚动速度越来越快 不知道是啥问题。