이 jQuery div Scoller의 UI를 어떻게 조작 할 수 있습니까? 나는 현재/아래로 텍스트를 스크롤하려면 다음 코드를 사용하고

... 나는 코드를 다음과 같이 수정하고 싶습니다,하지만 그것을 달성하는 방법에 대한 고민입니다 :이 jQuery div Scoller의 UI를 어떻게 조작 할 수 있습니까? 나는 현재/아래로 텍스트를 스크롤하려면 다음 코드를 사용하고

의 위치를 확인 위쪽 화살표/아래쪽 화살표의 불투명도에 영향을줍니다. #scroll의 내용이 맨 위에 오면 위로 (# scroll-up) 화살표가 희미 해집니다. #scroll의 내용이 맨 아래에 있으면 아래로 (# scroll-down) 화살표가 희미 해집니다. 모든 곳에서 사이, 두 버튼의는 퇴색 될 것이다 그들이

가 여기에 현재 코드의 필요하지 않은 경우

스크롤 버튼을 숨기기.이 트릭을 할 수있는 것처럼

var ele = $('#scroll'); 
var speed = 25, scroll = 5, scrolling; 
$('#scroll-up').mouseenter(function() { 
    scrolling = window.setInterval(function() { 
     ele.scrollTop(ele.scrollTop() - scroll); 
    }, speed); 
}); 
$('#scroll-down').mouseenter(function() { 
    scrolling = window.setInterval(function() { 
     ele.scrollTop(ele.scrollTop() + scroll); 
    }, speed); 
}); 
$('#scroll-up, #scroll-down').bind({ 
    click: function(e) { 
     e.preventDefault(); 
    }, 
    mouseleave: function() { 
     if (scrolling) { 
      window.clearInterval(scrolling); 
      scrolling = false; 
     } 
    } 
});

출처

2013-07-14 scout75

업데이트 코드 : http://jsfiddle.net/MzDst/8/ – scout75

아직도 다른 두 항목으로 어려움을 겪고 : 1) 텍스트가 하단에 도달하면 아래쪽 버튼을 토글하는 방법 (div 크기 조정에 유의하십시오) 2) 필요하지 않을 때 숨기는 방법. – scout75

아래쪽 버튼에 대한 해결책을 찾았습니다. 코드가 업데이트되었습니다 : http://jsfiddle.net/MzDst/9/ – scout75

보인다.

$(function() { 
    var ele = $('#scroll'); 
    var speed = 25, scroll = 5, scrolling; 
    $("#scroll-up").css('opacity', 0.5); 

    $('#scroll-up').mouseenter(function() { 
     // Scroll the element up 
     scrolling = window.setInterval(function() { 
      ele.scrollTop(ele.scrollTop() - scroll); 
      $("#scroll-up").css("opacity", (ele.scrollTop() == 0) ? 0.5 : 1); 
      $("#scroll-down").css("opacity", (ele[0].scrollHeight - ele.scrollTop() == ele.outerHeight()) ? 0.5 : 1); 
     }, speed); 
    }); 

    $('#scroll-down').mouseenter(function() { 
     // Scroll the element down 
     scrolling = window.setInterval(function() { 
      ele.scrollTop(ele.scrollTop() + scroll); 
      $("#scroll-up").css("opacity", (ele.scrollTop() == 0) ? 0.5 : 1); 
      $("#scroll-down").css("opacity", (ele[0].scrollHeight - ele.scrollTop() == ele.outerHeight()) ? 0.5 : 1); 
     }, speed); 
    }); 

    $('#scroll-up, #scroll-down').bind({ 
     click: function(e) { 
      // Prevent the default click action 
      e.preventDefault(); 
     }, 
     mouseleave: function() { 
      if (scrolling) { 
       window.clearInterval(scrolling); 
       scrolling = false; 
      } 
     } 
    }); 
    var winHeight = $(window).height(); 
    $("#scroll").css("height", winHeight - 220); 

    if (ele[0].scrollHeight == ele.outerHeight()){ 
     $("#contentscrollnav").hide(); 
    } 
}); 

$(window).resize(function() { 
    var winHeight = $(window).height(); 
    $("#scroll").css("height", winHeight - 220); 

    var ele = $('#scroll'); 
    if (ele[0].scrollHeight <= ele.outerHeight()){ 
     $("#contentscrollnav").hide(); 
    } else if (ele[0].scrollHeight > ele.outerHeight()) { 
     $("#contentscrollnav").show(); 
    } 
});

당신은 행동의 코드를 볼 수 있습니다 http://jsfiddle.net/MzDst/11/

버튼 기능이 완료까지와

출처

2013-07-15 01:05:45 scout75

이 jQuery div Scoller의 UI를 어떻게 조작 할 수 있습니까? 나는 현재/아래로 텍스트를 스크롤하려면 다음 코드를 사용하고

답변

관련 문제