나는 문제를 해결했고 당신의지도가 필요했습니다. 페이지 스크롤을 끝낼 때 애니메이션을 수행 할 의향이 있습니다 (마우스 휠 및 트랙 패드).
스크롤을 중지하면 창은 가장 가까운 요소에 스냅되어야하며 창 상단이 요소 근처에 100px 미만인 경우에만 해당됩니다.
이 기능이 핵심 패키지에 통합 된 fullpage.js, snapscroll 및 skrollr와 같은 플러그인을 사용하려고 시도했지만 스크롤 방향에 대한 적절한 문서가 없기 때문에 내 요구에 맞지 않았습니다. 또는 스크롤링 자체의 양.
앞서 언급 한 조건을 포함하려고 시도했지만 성공하지 못했습니다.
이것은 내 HTML 구조입니다.
<div class="section" id="section-1">
content here
</div>
<div class="section" id="section-2">
content here
</div>
<div class="section" id="section-3">
content here
</div>
<div class="section" id="section-4">
content here
</div>
이것은 지금까지 내 jQuery 스크립트입니다.
var items = $(".section");
var animating = false;
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
console.log('We are scrolling down!');
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
$.data(this, 'scrollTimer', setTimeout(function() {
items.each(function(key, value) {
animating = true;
$('body').animate({
scrollTop: $(value).offset().top + 'px'
}, 250);
setTimeout(function() {
animating = false;
}, 300);
return true;
});
}, 1200));
};
} else {
console.log('We are scrolling down!');
}
lastScrollTop = st;
});
미리 감사드립니다
나는 그것이 당신이 찾고있는 것이기를 바랍니다
var timeout = 1200;
var timer;
$(window).scroll(function(event){
clearTimeout(timer);
timer = setTimeout(function() {
$(".section").each(function() {
var scrollTop = $(window).scrollTop();
var offset = $(this).offset().top;
if(offset-scrollTop < 100 && offset-scrollTop > -100) {
$('html,body').animate({scrollTop: $(this).offset().top},'slow');
return;
}
});
}, timeout);
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다