滑動時在頂部顯示選項卡內容

Question

我有一個使用滑動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); 
    }); 
}); 

Answer 1

據油滑的文檔，這應該這樣做：

$('.swipe-tabs').on('beforeChange', function(event, slick, direction){ 
    $('html, body').animate({ 
    scrollTop: 0 
    }); 
}); 

另一種可能的情況是swipe（而不是beforeChange）。然而，我發現它同時具有swipe和scrollTop事件有點奇怪，因爲它導致了對角方向。看看使用afterChange是否更直觀。

只需按下Ctrl鍵/加利福尼亞 + ˚F光滑頁和類型上methods查看您的所有可用選項。