Przewijanie elementu div za pomocą jQuery

Question

Próbuję utworzyć element div w kontenerze w kontenerze, który można przewijać za pomocą strzałek w dół iw górę w jQuery.

Jedyne co mogę znaleźć które chciałbym użyć był http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

bym już zaczął próby przekonwertować do jQuery, jednak apepars używać znaczników takich jak iLayer i warstwy. Chciałbym użyć więcej standardowych tagów, jeśli to możliwe.

Wszelkie wskazówki we właściwym kierunku byłyby wysoko cenione.

Answer 1

jCarousel to wtyczka Jquery, ma już tę samą funkcjonalność, która może chcieć zarchiwizować. to jest ładne i łatwe. here odnośnikiem

i kompletną dokumentację można znaleźć here

Answer 2

Stosunkowo pozycji Twojego div zawartości w obrębie div nadrzędnej posiadające przepełnienie: ukryte. Ustaw strzałki w górę/w dół, przesuwając najwyższą wartość elementu div zawartości. Następujące jQuery nie zostało przetestowane. Daj mi znać, jeśli potrzebujesz dalszej pomocy z nią jako pojęciem.

div.container { 
    overflow:hidden; 
    width:200px; 
    height:200px; 
} 
div.content { 
    position:relative; 
    top:0; 
} 

<div class="container"> 
    <p> 
    <a href="enablejs.html" class="up">Up</a>/
    <a href="enablejs.html" class="dn">Down</a> 
    </p> 
    <div class="content"> 
    <p>Hello World</p> 
    </div> 
</div> 

$(function(){ 
    $(".container a.up").bind("click", function(){ 
    var topVal = $(this).parents(".container").find(".content").css("top"); 
    $(this).parents(".container").find(".content").css("top", topVal-10); 
    }); 

    $(".container a.dn").bind("click", function(){ 
    var topVal = $(this).parents(".container").find(".content").css("top"); 
    $(this).parents(".container").find(".content").css("top", topVal+10); 
    }); 
}); 

Answer 3

Istnieje wtyczka do tego, jeśli nie chcesz napisać samodzielnej implementacji samodzielnie. Nazywa się "scrollTo" (link). Umożliwia wykonywanie zaprogramowanego przewijania do określonych punktów lub używanie wartości takich jak -= 10px do ciągłego przewijania.

ScrollTo jQuery Plug-in

Answer 4

Nie wiem, czy to jest dokładnie to, co chcesz, ale nie wiesz, że możesz użyć właściwości CSS overflow stworzyć przewijania?

CSS:

div.box{ 
    width: 200px; 
    height: 200px; 
    overflow: scroll; 
} 

HTML:

<div class="box"> 
    All your text content... 
</div> 

Answer 5

wiem, że to wieki stare, ale po szukając czegoś podobnego to rano, i czyta się od odpowiedzi Atomix”(jak to właśnie dążymy do osiągnięcia), znalazłem to: http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div.

Po prostu umieszczam to na wypadek, gdyby ktoś inny potrzebował rozwiązania. :)

Answer 6

szukałem tej samej odpowiedzi i nie mogłem znaleźć niczego, co zrobił dokładnie to, co chciałem, więc stworzyłem własną rękę i napisałem go tutaj:

http://seekieran.com/2011/03/jquery-scrolling-box/

Demo pracy: http://jsbin.com/azoji3

Oto ważny kod:

function ScrollDown(){ 

    //var topVal = $('.up').parents(".container").find(".content").css("top").replace(/[^-\d\.]/g, ''); 
    var topVal = $(".content").css("top").replace(/[^-\d\.]/g, ''); 
    topVal = parseInt(topVal); 
    console.log($(".content").height()+ " " + topVal); 
    if(Math.abs(topVal) < ($(".content").height() - $(".container").height() + 60)){ //This is to limit the bottom of the scrolling - add extra to compensate for issues 
    $('.up').parents(".container").find(".content").stop().animate({"top":topVal - 20 + 'px'},'slow'); 
    if (mouseisdown) 
setTimeout(ScrollDown, 400); 
    } 

Recursion aby tak się stało:

$('.dn').mousedown(function(event) { 
    mouseisdown = true; 
    ScrollDown(); 
}).mouseup(function(event) { 
    mouseisdown = false; 
}); 

Podziękowania dla Jonathana Sampsona za wprowadzenie kodu, ale początkowo nie działał, więc mocno go zmodyfikowałem.Wszelkie sugestie dotyczące jej ulepszenia byłyby wspaniałe tutaj, zarówno w komentarzach, jak i komentarzach na blogu.

Answer 7

Doskonałym plug-in jest jscrollpane

Answer 8

Ten pracował dla mnie:

<html> 
<head> 
<title>scroll</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 

</head> 
<body> 

<style> 
div.container { 
    overflow:hidden; 
    width:200px; 
    height:200px; 
} 
div.content { 
    position:relative; 
    width:200px; 
    height:200px; 
    overflow:hidden; 
    top:0; 
} 
</style> 

<div class="container"> 
    <p> 
    <a href="javascript:up();"><img src="/images/img_flecha_left.png" class="up" /></a> 
    <a href="javascript:down();"><img src="/images/img_flecha_left.png" class="down" /></a> 

    </p> 
    <div class="content"> 
    <p>Hello World</p><p>Hello World</p> 
    <p>Hello World</p> 
    <p>Hello World</p> 
    <p>Hello World</p> 
    <p>Hello World</p> 
    <p>Hello World</p> 
    <p>Hello World</p> 
    <p>Hello World</p> 
    </div> 
</div> 

<script> 
function up() { 
    var topVal = $(".content").css("top"); //alert(topVal); 
    var val=parseInt(topVal.replace("px","")); 
    val=val-20; 
    $(".content").css("top", val+"px");  
} 
function down() { 
    var topVal = $(".content").css("top"); //alert(topVal); 
    var val=parseInt(topVal.replace("px","")); 
    val=val+20; 
    $(".content").css("top", val+"px"); 
} 
</script> 
</body> 
</html>