javascript - 带幻灯片的主体锁定全屏部分

Question

我有一个包含部分的单页网站。使用 Swiper + body-scroll-lock to lock用户滑动幻灯片时的中间部分。

如果用户向下滚动，主体锁定应该在最后一张幻灯片之前处于事件状态，反之亦然，如果用户滚动回页面顶部。

// body lock while going down
window.addEventListener("scroll", function() {
  var elementTarget = document.getElementById("the-dashboard");
  if (window.scrollY > elementTarget.offsetTop + elementTarget.offsetHeight) {
    $('html').addClass('no-scroll') // locks 
  }
});
// SWIPER

var leftSwiper = new Swiper(".swiper-container-left", {
  direction: "vertical",
  mousewheel: {
    invert: true,
    mousewheelReleaseOnEdges: true
  },
  allowTouchMove: false,
  initialSlide: 3
});
var rightSwiper = new Swiper(".swiper-container-right", {
  direction: "vertical",
  mousewheel: true,
  mousewheelReleaseOnEdges: true,
  pagination: {
    el: ".swiper-pagination"
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});
rightSwiper.on("reachEnd", function() {
  $('html').removeClass('no-scroll') // unlocks but the first lock still active and locks it again
});

问题: 无法再次解锁屏幕，因为用户已经“通过”了 div 的顶部，而不是即“触摸”了带有窗口​​顶部的 div 的顶部。

可能的解决方案: 一种在到达顶部时锁定部分的好方法，直到触发 Swiper“reachEnd”事件。

查看笔: https://codepen.io/rulloliver/pen/LYPyxaM

Answer 1

可以使用鼠标滚轮事件在此笔上找到 javascript 解决方案:https://codepen.io/kaido24/pen/pozpGwR

代码:

window.addEventListener("scroll", function() {
  $target = $("#swipes");
  if (window.scrollY > $target[0].offsetTop && window.scrollY < $target[0].offsetTop + 150) {
     $('html').addClass('no-scroll');
  }
  else {
    $('html').removeClass('no-scroll');
  }
});
var leftSwiper = new Swiper(".swiper-container-left", {
  direction: "vertical",
 /** mousewheel: {
    invert: true,
    mousewheelReleaseOnEdges: true
  },
**/
  allowTouchMove: false,
  initialSlide: 3
});
var rightSwiper = new Swiper(".swiper-container-right", {
  direction: "vertical",
 /**   mousewheel: true,
  mousewheelReleaseOnEdges: true, */
  pagination: {
    el: ".swiper-pagination"
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});
leftSwiper.on("slideNextTransitionStart", function() {
  rightSwiper.slidePrev(500, false);
});
leftSwiper.on("slidePrevTransitionStart", function() {
  rightSwiper.slideNext(500, false);
});
rightSwiper.on("slideNextTransitionStart", function() {
  leftSwiper.slidePrev(500, false);
});
rightSwiper.on("slidePrevTransitionStart", function() {
  leftSwiper.slideNext(500, false);
});
rightSwiper.on("reachEnd", function() {

});
rightSwiper.on("reachBeginning", function() {
});
var waiting = false;

$(window).bind('mousewheel', function(event) {
      if ($('html').hasClass('no-scroll')) {
      if (event.originalEvent.wheelDelta >= 0) {
          if (waiting == false) {
           l = leftSwiper.slideNext();
            if (l == false) {
               $('html').removeClass('no-scroll');
              console.log('top');
              console.log($(window));
            } else {
              waiting = true;
              setTimeout(function () {
                waiting = false;
              },500);
            }
          }
      }
      else {
        if (waiting == false) {
          var r = rightSwiper.slideNext();
          if (r == false) {
            $('html').removeClass('no-scroll');
          } else {
            waiting = true;
            setTimeout(function () {
              waiting = false;
            }, 500);     
          }          
         }
      }
    }
  });
$(document).on('mousewheel', function() {
  $(document).trigger('mousewheel');
});

(不是我做的)