section-scrollアニメーションの移動中にスクロールイベントが無効になる場所をカスタマイズしようとしています。スクロールアニメーションの進行中に、オーバーフローを非表示にしたり、他の同様の機能を適用してみましたが、うまくいきませんでした。
CSS
.stop-scrolling {
height: 100%;
overflow: hidden;
}
JSの例：
$('html').on('wheel', function(event) {
if (event.originalEvent.deltaY > 0) {
//scroll down
counter++;
$('body').addClass('stop-scrolling');
console.log("Start animacije");
setTimeout(function () {
$('body.stop-scrolling').removeClass('stop-scrolling');
console.log("End animation");
}, 800);
if (!(counter > maxSections)) {
$('html, body').animate({
scrollTop: $( $("#sect-"+counter) ).offset().top
}, 800);
}
} else {
//scroll up
counter--;
$('body').addClass('stop-scrolling');
console.log("Start animation");
setTimeout(function () {
$('body.stop-scrolling').removeClass('stop-scrolling');
console.log("End animation");
}, 800);
if (!(counter < 1)) {
$('html, body').animate({
scrollTop: $( $("#sect-"+counter) ).offset().top
}, 800);
}
}
if (counter <= 0) {
counter = 1;
}
else if (counter >= 3) {
counter = maxSections;
}
console.log(counter);
});
アニメーションの進行中にスクロールすると、セクションの終わりに到達するまでスクロールが続行されます。
アニメーションの進行中にスクロールイベントを無効にすることはできますか？
これは、コードの変更が少ない簡単な修正です。
スクロール状態を表す変数を宣言するだけです。また、この状態を使用すると、現在スクロールしている場合、着信スクロールイベントを無視できます。
let scrolling = false;
$('html').on('wheel', function(event) {
if (scrolling) {
return;
} else {
scrolling = true;
setTimeout(function () {
scrolling = false;
}, 800 /* animation duration */);
}
...
これが最後のフィドルリンクです。
setTimeout機能を使用するとfalse、スクロール状態をそのようにリセットでき、新しいイベントが受信されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加