자바 스크립트/CSS : 버튼을 사용하여 수직 스크롤 페이지

Question

저는 실제로 staticheight와 100 % 너비로 div가 있습니다. 현재이 div에는 overflow:auto이 있으므로 세로 스크롤 막대가 있습니다.

그러나이 프로젝트의 경우 스크롤바없이이 div가 필요합니다. 그래서 두 개의 버튼이 있습니다 - 하나는 div의 상단에, 하나는 스크롤을위한 것입니다. 그러나 지금까지는이 버튼을 사용하여 div를 스크롤하도록 솔루션을 찾지 못했습니다 (마우스 오버시 여러 px 또는 스크롤을 사용하는 경우).

는 (I 일반적으로 jQuery를 사용하지만 scrollTop() -Method의 사용 수 없었던거야)

그래서 저를 도와주세요!

Answer 1

나는 scrollTop (나는이 아닌 표준이 될 수있는 정말 좋은 이유를 금지이 사용자 경험에 대해 주장하지만) 당신이 찾고 그냥 뭐 것으로 기대.

그것은 나를 위해 작동 (live copy) :

이

CSS :

#theDiv { 
    height: 10em; 
    overflow: hidden; 
    border: 1px solid #ddd; 
} 

HTML :

<input id="btnDown" type="button" value="Down"> 
<input id="btnUp" type="button" value="Up"> 
<div id="theDiv"></div> 

자바 스크립트/w jQuery를 :

jQuery(function($) { 
    var theDiv; 

    theDiv = $("#theDiv"); 
    fill(); 

    $("#btnDown").click(function() { 
    theDiv.scrollTop(theDiv.scrollTop() + 10); 
    }); 
    $("#btnUp").click(function() { 
    var top = Math.max(theDiv.scrollTop() - 10, 0); 
    theDiv.scrollTop(top); 
    }); 

    function fill() { 
    var n, s; 

    s = "Line 0"; 
    for (n = 1; n < 20; ++n) { 
     s += "<br>Line " + n; 
    } 
    theDiv.html(s); 
    } 
});