javascript - 停止滚动页面，滚动轮播

Question

我在获得效果时遇到了问题。在我有轮播的网站上，我想得到 - 当我滚动页面并找到轮播时，我希望轮播开始滚动(停止滚动页面)，在发现所有幻灯片后，我希望页面开始滚动。

var slider = $('.slider');
$('.slider').slick({
  dots: false,
  vertical: true,
  arrows: false,
  variableWidth: false,
});

slider.on('wheel', (function(e) {
  e.preventDefault();
  if (e.originalEvent.deltaY < 0) {
    $(this).slick('slickPrev');
  } else {
    $(this).slick('slickNext');
  }
}));

.slide {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<section id="carousel">
  <div class=" position-relative">
    <div class="container">
      <div class="slider">
        <div class="slide">
          <h1>Slide 1</h1>
        </div>
        <div class="slide">
          <h1>Slide 2</h1>
        </div>
        <div class="slide">
          <h1>Slide 3</h1>
        </div>
        <div class="slide">
          <h1>Slide 4</h1>
        </div>
      </div>
    </div>
  </div>
</section>

和demo version

如何解决这个问题？在轮播可滚动时窃取页面

Answer 1

由于某些原因 edge 事件不工作。 beforeChange 在第一张或最后一张幻灯片时不会触发，我已将 infinite 属性设置为 true 并检查最后(或第一张)幻灯片用isLast，看看:

var slider = $('.slider'),
  isLast = true,
  stop = false,
  next = 0;
$('.slider').slick({
  dots: false,
  vertical: true,
  arrows: false,
  variableWidth: false,
  infinite: false,
  speed: 300
});

slider.on('wheel', (function(e) {
  if (!stop) {
    if (e.originalEvent.deltaY < 0) {
      $(this).slick('slickPrev');
    } else {
      $(this).slick('slickNext');
    }

    if (!isLast) {
      event.preventDefault();
      isLast = true;
    } else {
      if (next != 0)
        stop = true;
    }
  }

}));

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  isLast = false;
  next = nextSlide;
});

$('.slider').on('edge', function(event, slick, direction) {
  console.log(slick, direction);
});

.slide {
  background: green;
  height: 300px;
}

.container {
  margin: 300px 0;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<section id="carousel">
  <div class=" position-relative">
    <div class="container">
      <div class="slider">
        <div class="slide">
          <h1>Slide 1</h1>
        </div>
        <div class="slide">
          <h1>Slide 2</h1>
        </div>
        <div class="slide">
          <h1>Slide 3</h1>
        </div>
        <div class="slide">
          <h1>Slide 4</h1>
        </div>
      </div>
    </div>
  </div>
</section>