时间戳

首页 > 解决方案 > 如何在光滑滑块的最后一次上下滑动后继续滚动页面？

javascript - 如何在光滑滑块的最后一次上下滑动后继续滚动页面？

问题描述

我有一个光滑的滑块，当用户到达滑块部分时，它在鼠标滚动上滑动，但是在滚动所有幻灯片后，滑块卡在该位置并且不允许用户向上和向下移动到页面的任何一侧边。我想允许用户在完成滑块后继续他的页面旅程到其他部分，如滑块的上部或滑块的底部。任何人对问题的任何建议或更正，并允许用户在完成幻灯片后继续滚动页面。我尝试了一些解决方案，但在所有解决方案中都存在相同的问题，或者我想念一些东西。如果您有任何示例或建议，请发表评论。我很感激你。

这里是 js fiddle 链接来尝试一些 js fiddle

   <div>
    <p>Scroll down</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
  </div>

  <div class="slider">
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
   </div>
   <div class="slider-in">
     <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
   </div>
   <div class="slider-in">
    <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
   </div>
 </div>
 <div>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>123</p>
   <p>Scroll up</p>
 </div>


         .main-slider {
      width:100%;
      box-sizing: borde-box;
    }

    .main-slider img {
      width:100%;
    }

    /* Slider */
    .slick-slider
    {
        position: relative;

        display: block;
        box-sizing: border-box;

        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;

        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
            touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }

    .slick-list
    {
        position: relative;

        display: block;
        overflow: hidden;

        margin: 0;
        padding: 0;
    }
    .slick-list:focus
    {
        outline: none;
    }
    .slick-list.dragging
    {
        cursor: pointer;
        cursor: hand;
    }

    .slick-slider .slick-track,
    .slick-slider .slick-list
    {
        -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
             -o-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    .slick-track
    {
        position: relative;
        top: 0;
        left: 0;

        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .slick-track:before,
    .slick-track:after
    {
        display: table;

        content: '';
    }
    .slick-track:after
    {
        clear: both;
    }
    .slick-loading .slick-track
    {
        visibility: hidden;
    }

    .slick-slide
    {
        display: none;
        float: left;

        height: 100%;
        min-height: 1px;
    }
    [dir='rtl'] .slick-slide
    {
        float: right;
    }
    .slick-slide img
    {
        display: block;
    }
    .slick-slide.slick-loading img
    {
        display: none;
    }
    .slick-slide.dragging img
    {
        pointer-events: none;
    }
    .slick-initialized .slick-slide
    {
        display: block;
    }
    .slick-loading .slick-slide
    {
        visibility: hidden;
    }
    .slick-vertical .slick-slide
    {
        display: block;

        height: auto;

        border: 1px solid transparent;
    }
    .slick-arrow.slick-hidden {
        display: none;
    }




           const slider = $(".main-slider");
    slider
      .slick({
        slidesToShow: 1,
      slidesToScroll: 1,
        dots: false,
        arrows:false
      });

    slider.on('wheel', (function(e) {
      e.preventDefault();

      if (e.originalEvent.deltaY < 0) {
        $(this).slick('slickPrev');
      } else {
        $(this).slick('slickNext');
      }
    }));

标签： javascripthtmljquerycssslick.js

解决方案

我认为解决方案是在wheel活动期间检查是否已到达滑块的末端。一种方法是将元素的索引.slick-current与光滑元素的数量进行比较。

只是一个提示：您可能还想检查滑块是否已经完全可见，否则滑块可能滚动得太早。

我已经在页面上添加了对多个滑块的支持并处理了评论的问题。

$(document).ready(function() {

  const slider = $('.slider');
  
  function onSliderAfterChange(event, slick, currentSlide) {
    $(event.target).data('current-slide', currentSlide);
  }
  
  function onSliderWheel(e) {
    var deltaY = e.originalEvent.deltaY,
      $currentSlider = $(e.currentTarget),
      currentSlickIndex = $currentSlider.data('current-slide') || 0;
    
    if (
      // check when you scroll up
      (deltaY < 0 && currentSlickIndex == 0) ||
      // check when you scroll down
      (deltaY > 0 && currentSlickIndex == $currentSlider.data('slider-length') - 1)
    ) {
      return;
    }

    e.preventDefault();

    if (e.originalEvent.deltaY < 0) {
      $currentSlider.slick('slickPrev');
    } else {
      $currentSlider.slick('slickNext');
    }
  }
  
  slider.each(function(index, element) {
    var $element = $(element);
    // set the length of children in each loop
    // but the better way for performance is to set this data attribute on the div.slider in the markup
    $element.data('slider-length', $element.children().length);
  })
  .slick({
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: false
  })
  .on('afterChange', onSliderAfterChange)
  .on('wheel', onSliderWheel);

});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div class="width: 100%">
  <div style="height: 500px; background-color: #aaa"></div>
  <div class="slider">
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
  </div>
  <div style="height: 500px; background-color: #ccc"></div>
  <div class="slider">
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
    <div class="slider-in">
      <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" />
    </div>
  </div>
</div>

推荐阅读