JavaScript는 원활한 위아래 스크롤을 달성합니다.

본 글의 예시에서는 원활한 위아래 스크롤을 구현하기 위한 자바스크립트 코드를 설명하고 있으며, 참고용으로 모든 분들과 공유하고 있습니다

위아래로 원활한 스크롤을 구현하는 js의 원리 는 다음과 같습니다.
1. 먼저 컨테이너의 높이나 너비를 설정한 다음 Overflow:hidden
2. 컨테이너 높이를 설정한 후, 그 높이를 초과하면 콘텐츠가 숨겨집니다.
3. 컨테이너의 scrollTop(위아래로 스크롤) 속성 값을 변경하여 콘텐츠를 한 노드씩 위아래로 이동합니다(스크롤 원칙). 4. 스크롤 높이 scrollTop이 스크롤할 노드의 높이보다 크거나 같을 때, scrollTop=0으로 설정하고 하위 노드 트리의 첫 번째 노드를 끝으로 이동한 후 스크롤을 다시 시작하면 중단 없는 루프 스크롤 효과가 나타납니다. 나타나다.

렌더링은 다음과 같습니다.

코드는 다음과 같습니다.

<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>

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.