我有一个使用Slick Js创建的可跳转选项卡。主要是我试图在手机上使用它，以便用户可以刷过内容......
问题是每个标签上都有内容。让我们说从第一个选项卡，我向下滚动并移动到下一个第二个选项卡，内容从我向下滚动的一半开始。我想让它从每个标签的顶部开始。
以下是我到目前为止所做的事情
Codepen链接https://codepen.io/livewirerules/pen/vxzPaW
HTML
<div class="sub-header ">
<div class="swipe-tabs">
<div class="swipe-tab">One</div>
<div class="swipe-tab">Two</div>
<div class="swipe-tab">Three</div>
</div>
</div>
<div class="main-container">
<div class="swipe-tabs-container ">
<div class="swipe-tab-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nibh at pretium pellentesque. In sed cursus mauris. Aenean lobortis egestas imperdiet. Sed finibus odio ex, id luctus neque lobortis at. Maecenas sodales est eget tortor efficitur semper. Duis porttitor ligula tempus sapien ullamcorper pharetra. Etiam at arcu ullamcorper, finibus nibh vitae, iaculis justo. Praesent vitae sem sollicitudin, tristique turpis in, fringilla nisi. Etiam ac diam lectus. </div>
<div class="swipe-tab-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nibh at pretium pellentesque. In sed cursus mauris. Aenean lobortis egestas imperdiet. Sed finibus odio ex, id luctus neque lobortis at. Maecenas sodales est eget tortor efficitur semper. Duis porttitor ligula tempus sapien ullamcorper pharetra. Etiam at arcu ullamcorper, finibus nibh vitae, iaculis justo. Praesent vitae sem sollicitudin, tristique turpis in, fringilla nisi. Etiam ac diam lectus.
Etiam eu lobortis arcu. Vestibulum dolor augue, commodo nec nisl ultrices, fermentum lobortis dui. Morbi quis odio ante. Phasellus eleifend justo vitae nisl imperdiet, volutpat sagittis mi tincidunt. Nunc pharetra ipsum ac mi cursus vestibulum cursus at lectus. Nulla facilisi. Maecenas et tellus et justo tempor sollicitudin. Praesent maximus lacinia justo vitae ornare.
Sed aliquet id sapien eget posuere. In urna nunc, mollis eget diam sit amet, luctus laoreet mi. In cursus lectus et quam gravida, nec vulputate risus vulputate. Duis sit amet leo pellentesque, interdum erat eu, suscipit lorem. Nulla facilisi. Sed dignissim faucibus diam, at maximus urna vulputate eu. Aliquam mi metus, suscipit a commodo vehicula, semper eu sapien. Suspendisse in nunc eget tortor iaculis semper. Sed non purus faucibus, consequat dolor vel, eleifend ante. Morbi et ex pharetra tellus auctor sagittis. Praesent sollicitudin mi ut tempus commodo. Vestibulum ornare libero eget ex porta elementum. Curabitur est felis, viverra quis nisl non, maximus tempus ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nibh at pretium pellentesque. In sed cursus mauris. Aenean lobortis egestas imperdiet. Sed finibus odio ex, id luctus neque lobortis at. Maecenas sodales est eget tortor efficitur semper. Duis porttitor ligula tempus sapien ullamcorper pharetra. Etiam at arcu ullamcorper, finibus nibh vitae, iaculis justo. Praesent vitae sem sollicitudin, tristique turpis in, fringilla nisi. Etiam ac diam lectus.
Etiam eu lobortis arcu. Vestibulum dolor augue, commodo nec nisl ultrices, fermentum lobortis dui. Morbi quis odio ante. Phasellus eleifend justo vitae nisl imperdiet, volutpat sagittis mi tincidunt. Nunc pharetra ipsum ac mi cursus vestibulum cursus at lectus. Nulla facilisi. Maecenas et tellus et justo tempor sollicitudin. Praesent maximus lacinia justo vitae ornare.
Sed aliquet id sapien eget posuere. In urna nunc, mollis eget diam sit amet, luctus laoreet mi. In cursus lectus et quam gravida, nec vulputate risus vulputate. Duis sit amet leo pellentesque, interdum erat eu, suscipit lorem. Nulla facilisi. Sed dignissim faucibus diam, at maximus urna vulputate eu. Aliquam mi metus, suscipit a commodo vehicula, semper eu sapien. Suspendisse in nunc eget tortor iaculis semper. Sed non purus faucibus, consequat dolor vel, eleifend ante. Morbi et ex pharetra tellus auctor sagittis. Praesent sollicitudin mi ut tempus commodo. Vestibulum ornare libero eget ex porta elementum. Curabitur est felis, viverra quis nisl non, maximus tempus ante. </div>
<div class="swipe-tab-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nibh at pretium pellentesque. In sed cursus mauris. Aenean lobortis egestas imperdiet. Sed finibus odio ex, id luctus neque lobortis at. Maecenas sodales est eget tortor efficitur semper. Duis porttitor ligula tempus sapien ullamcorper pharetra. Etiam at arcu ullamcorper, finibus nibh vitae, iaculis justo. Praesent vitae sem sollicitudin, tristique turpis in, fringilla nisi. Etiam ac diam lectus.
Etiam eu lobortis arcu. Vestibulum dolor augue, commodo nec nisl ultrices, fermentum lobortis dui. Morbi quis odio ante. Phasellus eleifend justo vitae nisl imperdiet, volutpat sagittis mi tincidunt. Nunc pharetra ipsum ac mi cursus vestibulum cursus at lectus. Nulla facilisi. Maecenas et tellus et justo tempor sollicitudin. Praesent maximus lacinia justo vitae ornare.
Sed aliquet id sapien eget posuere. In urna nunc, mollis eget diam sit amet, luctus laoreet mi. In cursus lectus et quam gravida, nec vulputate risus vulputate. Duis sit amet leo pellentesque, interdum erat eu, suscipit lorem. Nulla facilisi. Sed dignissim faucibus diam, at maximus urna vulputate eu. Aliquam mi metus, suscipit a commodo vehicula, semper eu sapien. Suspendisse in nunc eget tortor iaculis semper. Sed non purus faucibus, consequat dolor vel, eleifend ante. Morbi et ex pharetra tellus auctor sagittis. Praesent sollicitudin mi ut tempus commodo. Vestibulum ornare libero eget ex porta elementum. Curabitur est felis, viverra quis nisl non, maximus tempus ante. </div>
</div>
</div>
CSS
$swipe-tab-color: #757575;
$swipe-active-tab-color: #000;
.swipe-tab-content.slick-slide.slick-current.slick-active {margin-top:50px;z-index: -99999}
.sub-header {
background-color: white;
position: fixed;
width: 100% !important;
z-index: 9999999;
}
.slick-initialized {
.swipe-tab-content {
position: relative;
min-height: 365px;
@media screen and (min-width: 767px) {
min-height: 500px;
}
}
.swipe-tab {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: none;
border: 0;
color: $swipe-tab-color;
cursor: pointer;
text-align: center;
border-bottom: 2px solid rgba($swipe-active-tab-color, 0);
transition: all 0.5s;
&:hover {
color: $swipe-active-tab-color;
}
&.active-tab {
border-bottom-color: $swipe-active-tab-color;
color: $swipe-active-tab-color;
font-weight: bold;
}
}
}
.main-container {
padding: 25px;
background: #f1f1f1;
}
JS
$(function () {
'use strict';
var $swipeTabsContainer = $('.swipe-tabs'),
$swipeTabs = $('.swipe-tab'),
$swipeTabsContentContainer = $('.swipe-tabs-container'),
currentIndex = 0,
activeTabClassName = 'active-tab';
$swipeTabsContainer.on('init', function(event, slick) {
$swipeTabsContentContainer.removeClass('invisible');
$swipeTabsContainer.removeClass('invisible');
currentIndex = slick.getCurrent();
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
});
$swipeTabsContainer.slick({
//slidesToShow: 3.25,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
infinite: false,
swipeToSlide: true,
touchThreshold: 10
});
$swipeTabsContentContainer.slick({
asNavFor: $swipeTabsContainer,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
infinite: false,
swipeToSlide: true,
draggable: false,
touchThreshold: 10
});
$swipeTabs.on('click', function(event) {
// gets index of clicked tab
currentIndex = $(this).data('slick-index');
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName);
$swipeTabsContainer.slick('slickGoTo', currentIndex);
$swipeTabsContentContainer.slick('slickGoTo', currentIndex);
});
//initializes slick navigation tabs swipe handler
$swipeTabsContentContainer.on('swipe', function(event, slick, direction) {
currentIndex = $(this).slick('slickCurrentSlide');
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
});
});
答案 0 :(得分：1)
根据Slick文档，这应该这样做：
$('.swipe-tabs').on('beforeChange', function(event, slick, direction){
$('html, body').animate({
scrollTop: 0
});
});
另一个可能的事件是swipe（而不是beforeChange）。但是，我发现同时发生swipe和scrollTop事件有点奇怪，因为它会产生对角线方向。看看使用afterChange是否在视觉上更有意义。
只需在光滑页面上按 Ctrl / Cmd + F ，然后输入methods即可查看所有可用选项。