JavaScript permet d'obtenir des compétences de défilement fluide vers le haut et vers le bas_javascript

L'exemple de cet article explique le code javascript pour obtenir un défilement transparent vers le haut et vers le bas, et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

Le principe de js pour obtenir un défilement fluide de haut en bas est le suivant :
1. Définissez d’abord la hauteur ou la largeur du conteneur, puis overflow:hidden
2. Une fois la hauteur du conteneur définie, le contenu sera masqué s'il la dépasse.
3. Modifiez la valeur de l'attribut scrollTop (faire défiler vers le haut et vers le bas) du conteneur pour déplacer le contenu de haut en bas d'un nœud (le principe du défilement
) ; 4. Lorsque la hauteur de défilement scrollTop est supérieure ou égale à la hauteur du nœud à faire défiler, définissez scrollTop = 0, déplacez le premier dans l'arborescence des nœuds enfants jusqu'à la fin et redémarrez le défilement. L'effet de défilement en boucle ininterrompu se produira. apparaître.

Le rendu est le suivant :

Le code est le suivant :

<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt.com</p>
</div>
<div id="colee2"></div>
</div>
<script>
//速度设置
var speed=1;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
 }else{
 colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.