Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скролл элемента .scroll() + событие (https://javascript.ru/forum/jquery/66478-skroll-ehlementa-scroll-sobytie.html)

Black_Star 17.12.2016 13:50

Скролл элемента .scroll() + событие
 
Добрый день уважаемые. Появилась необходимость задать элементу событие при его скроллинге, а точнее когда пользователь не видет элемента прокручивая страницу. Вроди бы детский вопрос, но я где-то недопонимаю.
Приведу пример
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style type="text/css">

.field{
	border: 1px solid #000;
	width: 800px;
	height: 1800px;
}

	.block{
		margin: 10%;
		width: 50px;
		height: 50px;
		background-color: red;
	}
</style>
<body>
	<div class="field">		
	<div class="block"></div>
	</div>
</body>
	<script type="text/javascript">
		
	window.onload = function () { 


$("body").scroll(function() {

 var coord = $('.block').offset().top;

if ($('.block').offset().top == 0) {
		
		console.log("Елемента больше не видно в браузере");
	}
else {
	console.log("Елемент снова в браузере виден");
}

});

	}
	</script>
</html>

Почему оно не срабатывает? Мне необходимо что б при исчезновение нижней грани элемента из области видимости отписывало сообщение в консоль, при появлении отписывало второе сообщение :help:

ksa 19.12.2016 08:38

Цитата:

Сообщение от Black_Star
Приведу пример

Даже из примера видно, что твое событие не срабатывает... :no:

А если продолжить твой пример - видно и остальное. ;)

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<style type="text/css">
.field{
	border: 1px solid #000;
	width: 800px;
	height: 1800px;
}
.block{
	margin: 10%;
	width: 50px;
	height: 50px;
	background-color: red;
}
#test {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 30px;
	border: 1px solid;
}
</style>
<body>
	<div id="test"></div>		
	<div class="field">		
		<div class="block"></div>
	</div>
<script type="text/javascript">
window.onload = function () { 
	window.onscroll=function() {
		var coord = $('.block').offset().top;
		$('#test').text(coord);
		if (coord == 0) {
			console.log("Елемента больше не видно в браузере");
		} else {
			console.log("Елемент снова в браузере виден");
		}
	};
};
</script>
</body>
</html>


Часовой пояс GMT +3, время: 01:10.