垂直滚动在行内 div(col-md-6) 之外不起作用

Question

我正在使用 Slick 滑块和 bootstrap 4. 我在 col-md-6 内使用了 slick 滑块，我希望滚动条在 div(col-md-6 ) 与行。但我找不到问题的解决方案。有人可以建议我或帮助我解决问题吗？我附上了jsfiddle and codepen代码供参考

var $ = jQuery;
$(document).ready(function () {
  $('.customer-logos').slick({
    vertical: true,
    infinite: false,
    arrows: false,
    draggable: true,
    dots: true });

});

const slider = $(".customer-logos");


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

  var slideCount = $(this)[0].slick["slideCount"];
  var currentIndex = $(this).slick("slickCurrentSlide");
  var totalSildeToShow = $(this)[0].slick.options["slidesToShow"];

  if (e.originalEvent.deltaY < 0) {
   e.preventDefault();
   if (currentIndex == slideCount)
    return;
    
    $(this).slick('slickPrev');
  } else {
    if (slideCount - totalSildeToShow === currentIndex)
    return;
    e.preventDefault();
    $(this).slick('slickNext');
  }

});

h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width:500px;
    height:250px;
}
.slick-dots {
    position: absolute;
    bottom: 37% !important;
    display: grid !important;
    width: 0 !important;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    top: 15%;
    right: 0;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://unpkg.com/slick-carousel@1.7.1/slick/slick.css">
<link rel="stylesheet" href="https://unpkg.com/slick-carousel@1.7.1/slick/slick-theme.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<section style="height: 100vh;background: #f436e3"></section>
<h2>Our Partners</h2>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, metus sit amet ornare pretium, sem velit facilisis arcu, id laoreet nibh augue ac justo. Duis pellentesque, elit id semper gravida, tellus ante porttitor nisl, et molestie nisi elit eu libero. Suspendisse ornare tincidunt tellus, vitae fermentum enim suscipit vitae. Proin et nisl sed neque commodo euismod aliquet consequat lectus. Integer vitae quam rhoncus, blandit enim ut, mollis justo. Donec pulvinar ex in facilisis venenatis. Ut ullamcorper eros sit amet leo dictum elementum eget sed urna.</p>
    </div>
    <div class="col-md-6">
      <div class="customer-logos slider">
        <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
        <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>

      </div>
    </div>
  </div>
</div>
<section style="height: 100vh;background: #f436e3"></section>

Answer 1

@pavankumar，检查片段和 jsFiddle。这是您所要求的解决方法。但是你必须在响应部分工作。请使用全屏查看实际O/P

var $ = jQuery;
$(document).ready(function() {
  $('#slider_block').bind('mousewheel DOMMouseScroll', function(e) {
    const slider = $(".customer-logos");
    var slideCount = $(slider)[0].slick["slideCount"];
    var currentIndex = $(slider).slick("slickCurrentSlide");
    var totalSildeToShow = $(slider)[0].slick.options["slidesToShow"];

    if (e.originalEvent.deltaY >= 0) {
      if ((slideCount - 1) !== currentIndex) {
        e.preventDefault();
        var delta = e.wheelDelta || e.detail;
        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
        $(".customer-logos").slick('slickNext')
      }
    } else {
      if (currentIndex != 0) {
        e.preventDefault();
        var delta = e.wheelDelta || e.detail;
        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
        $(".customer-logos").slick('slickPrev')
      }
    }



  });

  $('.customer-logos').slick({
    vertical: true,
    infinite: false,
    arrows: false,
    dots: true
  });

});

const slider = $(".customer-logos");

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

  var slideCount = $(this)[0].slick["slideCount"];
  var currentIndex = $(this).slick("slickCurrentSlide");
  var totalSildeToShow = $(this)[0].slick.options["slidesToShow"];

  if (e.originalEvent.deltaY < 0) {
    e.preventDefault();
    $(this).slick('slickPrev');
  } else {
    if (slideCount - totalSildeToShow === currentIndex)
      return;
    e.preventDefault();
    $(this).slick('slickNext');
  }
});

h2{
  text-align:center;
  padding: 20px;
}
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width:500px;
    height:250px;
}
.slick-dots {
    position: absolute;
    bottom: 37% !important;
    display: grid !important;
    width: 0 !important;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    top: 15%;
    right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://unpkg.com/slick-carousel@1.7.1/slick/slick.css">
<link rel="stylesheet" href="https://unpkg.com/slick-carousel@1.7.1/slick/slick-theme.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<section style="height: 100vh;background: #f436e3"></section>
<section id="slider_block">
  <div class="container ">
    <h2>Our Partners</h2>
    <div class="row">
      <div class="col-md-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, metus sit amet ornare pretium, sem velit facilisis arcu, id laoreet nibh augue ac justo. Duis pellentesque, elit id semper gravida, tellus ante porttitor nisl, et molestie nisi elit eu libero. Suspendisse ornare tincidunt tellus, vitae fermentum enim suscipit vitae. Proin et nisl sed neque commodo euismod aliquet consequat lectus. Integer vitae quam rhoncus, blandit enim ut, mollis justo. Donec pulvinar ex in facilisis venenatis. Ut ullamcorper eros sit amet leo dictum elementum eget sed urna.</p>
      </div>
      <div class="col-md-6">
        <div class="customer-logos slider">
          <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
          <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>

        </div>

      </div>
    </div>
  </div>
</section>
<section style="height: 100vh;background: #f436e3"></section>

垂直滚动在行内 div(col-md-6) 之外不起作用

Vertical Scroll doesn't work outside div(col-md-6) within row

javascript

jquery

slider

slick.js