페이지에서 뉴스의 간헐적이고 원활한 스크롤을 처리할 때 가장 일반적인 방법은 스크롤 영역의 내용을 복사하여 추가한 다음 스크롤 블록의 scrollTop을 제어하고 판단하여 스크롤 중지 효과를 얻는 것입니다.
실제로 많은 경우 노드 작업을 통해 간헐적으로 원활한 스크롤을 달성하는 것이 더 쉽습니다.
코드는 다음과 같습니다:
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
window.onload=함수(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
///스크롤 메인 메소드
///매개변수:o 스크롤 블록 객체
///매개변수: d 각 스크롤의 높이
///매개변수: c 현재 스크롤 높이
함수 스크롤업(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}또 다른{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
//Firefox에서 공백과 캐리지 리턴이 노드로 사용되는 문제 해결
함수 getFirstChild(노드){
동안(node.nodeType!=1)
{
node=node.nextSibling;
}
반환 노드;
}
효과:
코드 실행
<스타일 유형="텍스트/css">
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
window.onload=함수(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
함수 스크롤업(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}또 다른{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
함수 getFirstChild(노드){
동안(node.nodeType!=1)
{
node=node.nextSibling;
}
반환 노드;
}