2011-07-31 5 views
2

고정 높이 div 요소의 내용을 무한히 위아래로 스크롤 할 수 있도록 JavaScript (아마도 jQuery도?)를 사용하는 간단한 방법이 있는지 궁금합니다 (위, 아래, 위, 아래, 등) 페이지가로드되면 사용자 입력 또는 조작없이?JavaScript 무한히 위아래로 스크롤됩니까?

감사합니다. JavaScript로는 거의 평범하지 않으므로 입력을 주시면 감사하겠습니다. 순수 JS와

+0

여기를 참조하십시오 : http://stackoverflow.com/questions/6826464/css3-conveyor-belt-effect 여기 : http://flowplayer.org/tools/scrollable/index.html – Ariel

+0

자신의 대답을 대답 섹션에 넣고 정답으로 표시하십시오. 발견 한 대답으로 질문을 편집하지 마십시오. – FishBasketGordo

+0

나는 가지고 있겠지만 나는 100의 명성을 가지지 못했고 아직 8 시간도 안됐다. 편집을하고 사람들이 그들의 시간을 낭비하게하는 대신 대답을 찾았다 고 생각했다. 대답 해줘. –

답변

0

답장을 보내 주셔서 감사합니다.하지만 다른 곳에서 답을 찾았습니다. 다음은 내가 사용을 끝낸 이유입니다 : http://jsbin.com/onohan/3/edit#preview

몇 가지 작은 문제가 있었지만 문제를 해결하기위한 기본 JavaScript에 대해 충분히 알고있었습니다. 바라기를 이것은 미래에 누군가에게 도움이되기를 바랍니다. :)

1

당신은 이런 식으로 뭔가를 할 수 있습니다

var scroller = document.getElementById('scroller'); 
var delta = 15; 
var lastSc; 

    //console.log(scroller.scrollTop, scrollHeight); 
setInterval(function(){ 
    var sc = scroller.scrollTop + delta; 
    scroller.scrollTop = sc; 
    if (scroller.scrollTop === lastSc){ 
     delta = delta*(-1); 
    } 
    lastSc = scroller.scrollTop; 
}, 10); 

Here is demo

편집 : 업데이트 데모 여기

+0

'scrollHeight'는 실제 내용 높이보다 큰 값을줍니다. [here] (http://jsfiddle.net/5n83Z/1/)에서 실제 내용을 넘어서 스크롤합니다. –

+0

그것은 내가 좋아하는 것을 위해서도 효과적 일지 모르지만, 실제로 그 게시물을 만들기 전에 적절한 해결책을 찾았습니다. 고마워, 나는 분명히 미래의 사용을 위해 그 하나를 북마크거야. :) –

+0

@Shadow. 콘텐츠 높이가 의도적으로 1000px로 설정 되었기 때문입니다. –

0

jQuery를 그냥 쓴 것을 사용하는 것입니다 :

var speed = 100; //smaller means faster 
var offset = 5; //bigger means more text will be "scrolled" every time 

function ScrollMyDiv() { 
    var myDiv = $("#MyDiv"); 
    var direction = myDiv.attr("scroll_dir") || ""; 
    var lastScrollTop = parseInt(myDiv.attr("last_scroll_top") || "0", 10); 
    if (direction.length === 0) { 
     myDiv.attr("scroll_dir", "down"); 
     direction = "down"; 
    } 
    var top = myDiv.scrollTop(); 
    myDiv.attr("last_scroll_top", top + "") 
    if (direction === "down") { 
     if (top > 0 && lastScrollTop === top) 
      myDiv.attr("scroll_dir", "up"); 
     top += offset; 
    } else { 
     if (top <= 0) 
      myDiv.attr("scroll_dir", "down"); 
     top -= offset; 
    } 

    myDiv.scrollTop(top); 
    window.setTimeout(ScrollMyDiv, speed); 
} 

$(document).ready(function() { 
    ScrollMyDiv(); 
}); 

라이브 테스트 케이스 : http://jsfiddle.net/HmfNJ/1/

기본적으로 아래로 스크롤하여 (scrollTop에 추가) 시작한 다음 scrollTop이 그대로 유지되면 아래쪽에 도달했음을 확인하면 방향이 바뀌고 위로 스크롤됩니다.

관련 문제