DIVが表示されているときにスクロールを止めようとしているときに、ユーザーがページをスクロールするときにビューポートの中央に表示されます。divがページ上の固定位置に達するとスクロールを停止する
ページが停止し、ユーザーがスクロールすると、DIVの内容が水平にスクロールしてから、ユーザーがスクロールを続けることができます。
function pauseScroll() {
// $(document).bind('mousewheel DOMMouseScroll', function() {
disableScroll();
console.log('trying to scroll Card: ' + selCard);
setTimeout(pauseStop(), 500);
slideCard(selCard);
// });
}
function pauseStop() {
console.log('Pause Stop');
}
function unpauseScroll() {
// $(document).unbind('mousewheel DOMMouseScroll');
enableScroll();
document.getElementById("status").innerHTML = "enabled";
document.getElementById("status").className = "enabled";
}
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {
37: 1,
38: 1,
39: 1,
40: 1
};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
$(window).scroll(function() {
if ($("div").hasClass("cardstop")) {
var top_of_element = $(".cardstop").offset().top;
var bottom_of_element = $(".cardstop").offset().top + $(".cardstop").outerHeight();
var bottom_of_screen = $(window).height()
var top_of_screen = $(window).scrollTop();
var elHeight = bottom_of_element - top_of_element;
var topSpace = ((($(window).height()) - elHeight)/2);
var scrollFix = top_of_screen + topSpace;
//top_of_screen
var st = $(this).scrollTop();
if (st > lastScrollTop) {
// downscroll code
console.log('Top of el: ' + top_of_element);
console.log('TopScreen: ' + top_of_screen);
console.log('Space: ' + topSpace);
console.log('Bot of el: ' + bottom_of_element);
console.log('BotScreen: ' + bottom_of_screen);;
if (top_of_element < scrollFix) {
if (selCard = 1) {
console.log('One to Two');
pauseScroll();
selCard = 2;
} else if (selCard = 2) {
pauseScroll();
selCard = 1;
}
unpauseScroll();
}
} else {
// upscroll code
console.log('Scroll Up: ');
if (selCard = 3) {
console.log('3 to 2');
pauseScroll();
selCard = 4;
}
if (selCard = 4) {
pauseScroll();
unpauseScroll();
}
}
lastScrollTop = st;
// if (bottom_of_screen > top_of_element) {
// The element is visible, do something
}
});
このプロセスは、カードの内容をあまりにも速くスクロールさせ、次に移動するという仕組みです。
私がどこに間違っているかについての指針は素晴らしいでしょう。
よろしく
私は[jsfiddle]にモックアップを追加しました:私はこのJSツールを使用することができ認めるだろうhttps://jsfiddle.net/stato74/sjtp9wv3/2/
あなたのはちょっと間違って見れば 'selCard = 1 'を。 'selCard == 1'ではないはずですか? – Fabian
codepenまたはjsfiddleの例を作成できますか?コードを共有して問題を見つける方が簡単な場合もあります。 – Fabian
本当にやりたいですか?このスクロールの乗っ取りは、あなたが涼しい音を達成しようとしていますが、よく知られた受け入れられたパターンから逸脱しているので、人々を怒らせます。 – DanteTheSmith