スワイプの上部にタブのコンテンツを表示

Question

Slick Jsを使用してスワイプ可能なタブが作成されています。主に携帯電話でこれを使用しようとしているので、ユーザーがコンテンツをスワイプできる。

問題は各タブにコンテンツがあることです。最初のタブから、スクロールして次の2番目のタブに移動すると、コンテンツはスクロールした位置の半分から開始されます。私はそれを各タブの上から始めたいと思っています。以下は

は私がこれまでに

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 
    }); 
}); 

別の可能性のあるイベントが（代わりにbeforeChangeの）swipeだろう。しかし、斜め方向になるので、swipeとscrollTopの両方のイベントが同時に発生するのはちょっと奇妙です。 afterChangeを使用するのが視覚的に意味があるかどうかを確認してください。

だけで、すべての利用可能なオプションを表示するmethodsで滑らかなページや種類にはCtrl/Cmdを + Fを押してください。