[javascript] 사용자가 특정 요소로 스크롤 할 때 이벤트 트리거-jQuery 사용
한 페이지 아래에 h1이 있습니다 ..
<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>
사용자가 h1로 스크롤하거나 브라우저보기에 표시 할 때 경고를 트리거하고 싶습니다.
$('#scroll-to').scroll(function() {
alert('you have scrolled to the h1!');
});
어떻게해야합니까?
답변
offset
요소를 계산 한 다음 다음과 scroll
같은 값과 비교할 수 있습니다 .
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
console.log('H1 on the view!');
}
});
이 데모 바이올린 확인
업데이트 된 데모 바이올린 경고 없음-대신 요소를 FadeIn ()
요소가 뷰포트 내부에 있는지 확인하도록 코드를 업데이트했습니다. 따라서 이것은 if 문에 몇 가지 규칙을 추가하여 위아래로 스크롤하든 상관없이 작동합니다.
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
//Do something
}
답변
사용자가 페이지의 특정 부분을 스크롤 할 때이 질문을 jQuery 트리거 작업 의 베스트 답변과 결합
var element_position = $('#scroll-to').offset().top;
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if(y_scroll_pos > scroll_pos_test) {
//do stuff
}
});
최신 정보
요소가 맨 위가 아닌 화면의 중간에있을 때 트리거되도록 코드를 개선했습니다. 또한 사용자가 화면 하단을 누르고 함수가 아직 실행되지 않은 경우 코드를 트리거합니다.
var element_position = $('#scroll-to').offset().top;
var screen_height = $(window).height();
var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function
var activation_point = element_position - (screen_height * activation_offset);
var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer
//Does something when user scrolls to it OR
//Does it when user has reached the bottom of the page and hasn't triggered the function yet
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;
if(element_in_view || has_reached_bottom_of_page) {
//Do something
}
});
답변
최선의 방법은 바로 그 일을하는 기존 라이브러리를 활용하는 것입니다.
http://imakewebthings.com/waypoints/
요소가 뷰포트 상단에 도달하면 실행되는 리스너를 요소에 추가 할 수 있습니다.
$('#scroll-to').waypoint(function() {
alert('you have scrolled to the h1!');
});
사용중인 놀라운 데모 :
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
답변
Inview 라이브러리 트리거 이벤트 및 jquery 1.8 이상에서 잘 작동합니다!
https://github.com/protonet/jquery.inview
$('div').on('inview', function (event, visible) {
if (visible == true) {
// element is now visible in the viewport
} else {
// element has gone out of viewport
}
});
https://remysharp.com/2009/01/26/element-in-view-event-plugin 읽기
답변
모든 기기에 사용할 수 있습니다.
$(document).on('scroll', function() {
if( $(this).scrollTop() >= $('#target_element').position().top ){
do_something();
}
});
답변
스크롤이 성공한 후 한 번만 스크롤을 발사합니다.
받아 들인 대답은 저에게 효과적이지만 (90 %) 실제로 한 번만 실행하려면 약간 조정해야했습니다.
$(window).on('scroll',function() {
var hT = $('#comment-box-section').offset().top,
hH = $('#comment-box-section').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > ((hT+hH-wH)-500)){
console.log('comment box section arrived! eh');
// After Stuff
$(window).off('scroll');
doStuff();
}
});
참고 : 성공적인 스크롤이란 사용자가 내 요소로 스크롤했거나 즉 내 요소가보기에있을 때를 의미합니다.
답변
다음 과 같은 이벤트와 함께 jQuery 플러그인 을 사용할 수 있습니다 inview
.
jQuery('.your-class-here').one('inview', function (event, visible) {
if (visible == true) {
//Enjoy !
}
});
링크 : https://remysharp.com/2009/01/26/element-in-view-event-plugin