Sử dụng hai nút (hình ảnh) để cuộn một DIV được đặt thành tràn: bị ẩn; với jQuery

Question

tôi đang gặp một container div:

.mask { 
    height: 157px; 
    overflow: hidden; 
} 

nội dung bên trong thùng chứa này dài hơn 157px. tôi có hai liên kết (hình ảnh) mà tôi muốn sử dụng để cuộn nội dung trong vùng chứa lên hoặc xuống:

<ul class="scroll"> 
<li><a href="#"><img src="img/text-down-icn.png" alt="scroll down" /></a></li> 
<li><a href="#"><img src="img/text-up-icn.png" alt="scroll up" /></a></li> 
</ul> 

làm cách nào tôi có thể nhận hai liên kết đó để cuộn nội dung bên trong vùng chứa?

cảm ơn rất nhiều

======================================= ====

Cảm ơn sự giúp đỡ của bạn. Hóa ra nó hoạt động tốt nhất bằng cách sử dụng scrollTo Plugin (http://plugins.jquery.com/project/ScrollTo).

$(document).ready(function(){ 
    $(".down").click(function() { 
     $('.mask').scrollTo('+=156px', 500);; 
    }); 

    $(".up").click(function() { 
     $('.mask').scrollTo('-=156px', 500);; 
    }); 
}); 

Answer 1

Bạn có thể kiểm tra các ví dụ để học hỏi làm thế nào để thực hiện nó hoặc trực tiếp sử dụng chúng để có được công việc thực hiện:

1- HoverScroll jQuery plugin

2- jCarousel

3- Smooth Div Scroll

Answer 2

Nếu bạn muốn sử dụng sự kiện onmouseover và onmouseout, bạn có thể sử dụng một cái gì đó như thế:

onmouseover:

function scrollUp(){ 
    document.getElementById('scroll-pane').scrollTop -= 15; // vertical scroll increments 
    timerScrollUp = setTimeout('scrollUp()',10); 
} 

và onmouseout bạn rõ ràng timer:

clearTimeout(timerScrollUp); 

Answer 3

Dưới đây là một số mã mà làm việc :) Bạn sẽ cần phải thêm một số phong cách để ngăn chặn các nút di chuyển quá. Thêm vị trí "cố định" cho các nút.

Essentialyl những gì đang xảy ra ở đây là nội dung đang được di chuyển lên/xuống trong/ra khỏi thùng chứa làm cho nó xuất hiện để cuộn. Trong khi các nút không bị ảnh hưởng!

Hy vọng điều này là sử dụng :)

<div class="mask"> 
<div id="mover"> 
Content Here 
</div> 
<ul class="scroll"> 
    <li><a href="#" class="down"><img src="img/text-down-icn.png" alt="scroll down" /></a></li> 
    <li><a href="#" class="up"><img src="img/text-up-icn.png" alt="scroll up" /></a></li> 
</ul> 
</div> 

<script type="text/javascript"> 
    $(".down").click(function() { 
     $("#mover").animate({marginTop: '-=20px'}, 0); 
    }); 

    $(".up").click(function() { 
     $("#mover").animate({ marginTop: '+=20px' }, 0); 
    }); 
</script> 

<style> 
.mask { 
    height: 157px; 
    overflow: hidden; 
} 

.scroll 
{ 
    float: right; 
} 
</style>