http://jsfiddle.net/RRSmQ/
Last updated
Tham khảo thêm:
Cách 1:
C:\xampp\htdocs\html\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Document</title>
<style type="text/css">
.big {
width: 100%;
height: 2000px;
/* bigger as viewport - if browser height is not heigher! */
background: #c5c5c5;
overflow: hidden;
font-size: 48px;
}
</style>
</head>
<body>
<div class="text" id="text1">Text 1</div>
<div class="big" id="big1">1</div>
<script type="text/javascript">
function isScrolledIntoView(elem) {
if ($(elem).length == 0) {
return false;
}
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
// return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); //try it, will only work for text
return (docViewBottom >= elemTop && docViewTop <= elemBottom);
}
// $('.text').each(function() {
// console.log(isScrolledIntoView(this), this);
// });
// $('.big').each(function() {
// console.log(isScrolledIntoView(this), this);
// });
$(window).on('scroll', function() {
$('.text').each(function() {
console.log(isScrolledIntoView(this), this);
});
$('.big').each(function() {
console.log(isScrolledIntoView(this), this);
});
});
</script>
</body>
</html>Cách 2:
C:\xampp\htdocs\html\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Document</title>
<style type="text/css">
.log {
position: fixed;
right: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="log">log</div>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
<h3 class="target">target element</h3>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
scroll to target element<br>
<script type="text/javascript">
$.fn.is_on_screen = function() {
var win = $(window);
var viewport = {
top: win.scrollTop(),
left: win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
if ($('.target').length > 0) { // if target element exists in DOM
if ($('.target').is_on_screen()) { // if target element is visible on screen after DOM loaded
$('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
} else {
$('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
}
}
$(window).scroll(function() { // bind window scroll event
if ($('.target').length > 0) { // if target element exists in DOM
if ($('.target').is_on_screen()) { // if target element is visible on screen after DOM loaded
$('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
} else {
$('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
}
}
});
</script>
</body>
</html>
