.scroll()

Định nghĩa và sử dụng

.scroll(): Ràng buộc xử lý một sự kiện tới sự kiện Javascript "scroll" hay kích hoạt sự kiện này trên thành phần.

Cấu trúc

Đã được thêm vào từ phiên bản 1.0

$('.target').scroll();

.scroll(function(){})

$('.target').scroll(function(){
    $('span').css("display", "inline").fadeOut("slow");
});

Đã được thêm vào từ phiên bản 1.4.3

.scroll(eventData, function(){})

.scroll()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div.target {
    height:150px;
    overflow:scroll;
}
span {
    color:red;
    display:none;
}
</style>
<script>
$(function(){
    $('.target').scroll(function(){
        $("span").css("display", "inline").fadeOut("slow");
    });
	
    $('button').click(function(){
        $('.target').scroll()
    })
});
</script>
</head>

<body>
<div class="target">Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br /></div>
<br />
<button>Click để kích hoạt sự kiện scroll</button>
</body>
</html>

Hiển thị trình duyệt:

Click vào button để kích hoạt sự kiện scroll.

.scroll(function(){})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div.target {
    height:150px;
    overflow:scroll;
}
span {
    color:red;
    display:none;
}
</style>
<script>
$(function(){
    $('.target').scroll(function(){
        $("span").css("display", "inline").fadeOut("slow");
    });
});
</script>
</head>

<body>
<div class="target">Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br />
Thành phần div <span>scrolling</span><br /></div>
</body>
</html>

Hiển thị trình duyệt:

Khi sử dụng scroll ta sẽ thấy được kết quả.

.resize()

.scrollLeft()