Love beautiful code? We do too.
Định nghĩa và sử dụng .scroll() trong jQuery
.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 .scroll() trong jQuery
Đã được thêm vào từ phiên bản 1.0
.scroll()
$('.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="http://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="http://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ả.
Unpublished comment
Viết câu trả lời