javascript - 如何在幻灯片更改时将幻灯片滚动到光滑轮播中的顶部?
问题描述
由于不使用库就无法制作滑动选项卡,因此我决定使用 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>
解决方案
推荐阅读
- python - 根据原始值间隔拆分 datrafame 熊猫
- python - 在 ProcessBuilder 中使用“/system/bin/sh”时,android 10 和 11 中的权限被拒绝
- kubernetes - 调试 Kubernetes Custom Operator 上的 Reconcile 触发器的原因
- javascript - 哪些IOS浏览器支持访问camera和ble服务?
- sql - 通过在列中应用条件来获取数据
- apache-kafka - Strimzi Kafka 在 GKE 升级期间“没有匹配侦听器的代理”
- node.js - typegoose/mongoose 从模型类获取新文档的正确方法是什么
- javascript - 未捕获的类型错误:deleteButton 不是 HTMLButtonElement.onclick 处的函数
- python - Python程序触发成功和失败任务的电子邮件
- swift - 如何在蓝牙车载设备上显示来电名称而不是号码