Question

由于没有使用库就无法制作滑动选项卡的方法，我决定使用slick来使用slick本身来创建此选项卡式内容。

选项卡运行正常，但是当一张幻灯片中的内容超过另一张时，这些幻灯片不会在幻灯片更改时自动滚动到顶部。我们必须手动滚动到下一张幻灯片的顶部。

我们如何消除光滑轮播中的这种行为？

滚动到第一个标签的底部，向左滚动以加载下一个标签的内容，我们可以看到它没有滚动到顶部。

到目前为止，我的代码：

$(function() {
  'use strict';
  $('.tabContainer').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.tabContent',
    arrows: false,
    infinite: false,
    focusOnSelect: true,
    swipeToSlide: true,
    touchThreshold: 10,
  });
  $('.tabContent').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: '.tabContainer',
    arrows: false,
    infinite: false,
    swipeToSlide: true,
    touchThreshold: 10
  });
  /* On Slide Change, Scroll the div .tabcontent to top */
  $('.tabContainer').on('afterChange', function(event, slick, currentSlide, nextSlide) {
    $(".contentItem").animate({
      scrollTop: 0
    }, "fast");
  });
});

body {
  margin: 0;
  padding: 0;
  width:100vw;
  height:100vh
}

.tabContent {
  overflow-y: hidden
}

.contentItem {
  overflow-y: scroll!important;
  /*not working*/
  width: 100%/*not working*/
}

.tabItem.slick-current {
  box-shadow: inset 0 -3px red;
  color: red;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

</head>

<body>
  <div class="tabContainer">
    <div class='tabItem'>Tab01</div>
    <div class='tabItem'>Tab02</div>
    <div class='tabItem'>Tab03</div>
    <div class='tabItem'>Tab04</div>
    <div class='tabItem'>Tab05</div>
    <div class='tabItem'>Tab06</div>
    <div class='tabItem'>Tab07</div>
    <div class='tabItem'>Tab08</div>
  </div>
  <div class="tabContent">
    <div class="contentItem">Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/>Content1<br/></div>
    <div class='contentItem'>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/>Content2<br/></div>
    <div class='contentItem'>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/>Content3<br/></div>
    <div class='contentItem'>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/>Content4<br/></div>
    <div class='contentItem'>Content5</div>
    <div class='contentItem'>Content6</div>
    <div class='contentItem'>Content7</div>
    <div class='contentItem'>Content8</div>
  </div>
</body>

</html>

如何在更换幻灯片时将其滑动到圆滑的转盘顶部？

0 个答案: