Node.js는 원활한 스크롤을 달성하고 IE 및 FF_javascript 기술과 호환됩니다.

원리 분석:
1. 먼저 ul과 같이 컨테이너의 높이나 너비를 설정하고, Overflow:hidden을 설정합니다.
2. 40px를 초과하면 초과 부분 오버플로가 숨겨지고, scrollTop 속성을 사용할 수 있으며, Overflow:scroll을 사용하여 효과를 확인할 수 있습니다.
3. 콘텐츠를 한 노드씩 위아래로 이동합니다(스크롤의 원리).
4. 스크롤 높이가 스크롤할 노드의 높이보다 크거나 같을 때, scrollTop=0으로 설정하고 이동합니다. 하위 노드 트리의 첫 번째 항목을 끝까지 스크롤하고 다시 시작하면 중단 없는 루프 스크롤 효과가 나타납니다.
html 소스코드

코드 복사 코드는 다음과 같습니다.

;

• 1


• 2


• 3


• 4
;

• 5


• 6


• 8
🎜>
• 9

< /html>


js 소스 코드




코드 복사

코드는 다음과 같습니다.

// 자바스크립트 문서

/*****
@author Leaves chen (leaves615@gmail.com)
@copyright 2009
*****/
var Pause=false;
var scrollTimeId=null;
var 컨테이너=null;
var lineHeight=null;
var 속도=0;
var 지연=0;
simpleScroll=function(container1,lineHeight1,speed1,delay1){
    container=document.getElementById(container1);
    lineHeight=lineHeight1;
    속도=speed1;
    지연=delay1;
    //滚动效果
    scrollexc=function(){
        if(pause) return ;
        container.scrollTop =2;
        var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
        if(container.scrollTop%lh<=1){
            clearInterval(scrollTimeId);
            fire();
            container.scrollTop=0;
            setTimeout(start,delay*1000);
        }
    };
    //开始滚动
    start=function(){
        var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
            if (container.scrollHeight - Container.offsetHeight >= lh)
               scrollTimeId = setInterval(scrollexc, speed);
    };     };
    container.onmouseover=function(){pause=true;};
    container.onmouseout=function(){pause=false;};
    setTimeout(start,delay*1000);
};