Cuộn một div bằng jQuery

Tôi đang cố tạo một div trong vùng chứa trong vùng chứa có thể cuộn bằng các mũi tên lên và xuống trong jQuery.Cuộn một div bằng jQuery

Điều duy nhất tôi có thể tìm thấy mà tôi muốn sử dụng là http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

tôi sẽ đã bắt đầu cố gắng để chuyển đổi đó để jQuery, tuy nhiên nó apepars sử dụng thẻ như ilayer và lớp. Tôi muốn sử dụng nhiều thẻ tiêu chuẩn hơn nếu có thể.

Bất kỳ con trỏ nào đi đúng hướng đều sẽ được đánh giá cao.

Nguồn

2009-07-28 Anonymous

Riêng đối với chiều cao năng động sẽ là tốt. Tôi cũng cần cái này. – Kezzer

Cảm ơn phản hồi. Tôi muốn sử dụng ScrollTo jQuery Plugin tuy nhiên tôi không thể thực sự làm cho nó hoạt động. Nó thiếu một ví dụ đơn giản - đó là tất cả những gì tôi cần! –

jCarousel là một Plugin Jquery, nó có chức năng tương tự đã được triển khai, có thể muốn lưu trữ. nó đẹp và dễ. here là liên kết

và tài liệu đầy đủ có thể được tìm thấy here

Nguồn

2009-07-28 11:20:05 Posto

Vui lòng mô tả những gì bạn đã liên kết đến, nó có thể giúp bạn có được nhiều upvotes hơn. Cảm ơn! –

Ví dụ này không hoạt động trong firefox 4, một số khác tại: http://sorgalla.com/projects/jcarousel/#Examples làm. –

tương đối vị trí div nội dung của bạn trong vòng một div cha mẹ có overflow: hidden. Làm cho mũi tên lên/xuống của bạn di chuyển giá trị hàng đầu của div nội dung. JQuery sau đây chưa được kiểm tra. Hãy cho tôi biết nếu bạn cần thêm bất kỳ sự trợ giúp nào với nó như một khái niệm.

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); 
    }); 
});

Nguồn

2009-07-28 11:22:58 Sampson

Tại sao không tăng và giảm 'scrollTop' với bộ hẹn giờ? – aditya

Bạn cũng có thể làm điều đó. – Sampson

Tôi tin rằng bạn có thể làm .css ("top", "+ = 10px"); ? – Alextoul

Có trình cắm cho việc này nếu bạn không muốn tự mình thực hiện bản thân. Nó được gọi là "scrollTo" (link). Nó cho phép bạn thực hiện cuộn được lập trình tới các điểm nhất định hoặc sử dụng các giá trị như -= 10px để cuộn liên tục.

ScrollTo jQuery Plug-in

Nguồn

2009-07-28 12:01:06 aditya

Tôi không biết nếu điều này là chính xác những gì bạn muốn, nhưng bạn có biết bạn có thể sử dụng thuộc tính CSS overflow để tạo thanh cuộn?

CSS:

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

HTML:

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

Nguồn

2009-07-28 12:36:14 DisgruntledGoat

Tôi nghĩ rằng những gì OP muốn làm, mặc dù, là thay thế chức năng này với jQuery. Trên thực tế, tôi có thể sẽ đặt tràn CSS thành tự động. Không cần thanh cuộn nếu nội dung không dài hơn div. Đây thực sự là CSS mặc định cho DIV. javascript nên được sử dụng để tắt tràn. – Armstrongest

Bạn đã giải quyết được vấn đề rất lớn của tôi với mã này. Tôi muốn được giúp đỡ thêm một chút. Làm thế nào tôi có thể thay đổi màu sắc hoặc định dạng của các thanh cuộn của div này? –

Tôi biết đây là lứa tuổi già, nhưng khi tìm kiếm một cái gì đó tương tự như sáng nay, và đọc lên trên phản ứng Atomix'(vì đây là những gì chúng tôi đang hướng đến việc đạt được), tôi đã tìm thấy điều này: http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div.

Chỉ cần đặt trường hợp đó trong trường hợp bất kỳ ai khác cần giải pháp. :)

Nguồn

2010-08-31 10:21:57 Kaonashi

tôi đang tìm kiếm câu trả lời này giống nhau và tôi không thể tìm thấy bất cứ điều gì đã làm chính xác những gì tôi muốn vì vậy tôi tạo của riêng tôi và đăng nó ở đây:

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

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

đây là mã quan trọng:

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 để làm cho nó xảy ra:

01.

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

Nhờ Jonathan Sampson cho một số mã để bắt đầu nhưng ban đầu nó không hoạt động nên tôi đã sửa đổi rất nhiều.Bất kỳ đề xuất để cải thiện nó sẽ là tuyệt vời ở đây trong một trong hai ý kiến hoặc ý kiến trên blog.

Nguồn

2011-03-09 03:27:50

An excellent plug-in là jscrollpane

Nguồn

2011-10-26 23:09:52

Điều này thật tuyệt đẹp. Tôi tích hợp nó vào một trang web trong vòng vài phút. Công việc tuyệt vời !!!! –

này đã làm việc cho tôi:

<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>

Nguồn

2012-05-16 14:28:28 joan16v

Cuộn một div bằng jQuery

Trả lời

Các vấn đề liên quan