javascript - 从平滑滚动到正常滚动，反之亦然

Question

我将开始为您链接 website我指的是什么。

这one取而代之的是一个已经启动并运行此功能的官方网站，希望您能更好地理解我的意思!

我制作了 2 个部分，并应用了一个滚动，只需一次鼠标滚动即可自动转到下一个部分。

但是在这个页面中，我在第 2 部分有一个表格，很长，所以我更愿意禁用该部分的固定 View 并启用正常滚动以查看整个表格。

但是，当我向上滚动到第二部分末尾时，我希望能够切换回另一个滚动条，准备返回到第一部分。

这是我的 JS 脚本:

$(document).ready(function() {
    $('#fullpage').fullpage({
        css3: true,
        scrollingSpeed: 600,
        autoScrolling: true,
        fitToSection: true,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        //Design
        controlArrows: true,
        verticalCentered: true,
        sectionsColor: ['#ccc', '#fff', '#cfc'],
        fixedElements: '#header, .footer',
        responsiveWidth: 0,
        responsiveHeight: 0,
    });
});

我正在使用 FullPage 来执行此操作，也许你们中的一些人已经知道了。

编辑:

这是body setup，2 个section，#first 和#second，每个都在 .section 类的 div 中，并且 div 中的两个 div #fullpage:

    <div id="fullpage">
    <div class="section" id="first">
        <p style="color:#fff; margin-bottom: 50px; font-size: 5em; text-align: center;">Staff</p>
    </div>


    <div class="section" id="second">


<!-- Capo -->
    <table>
    ...
    </table>
    </div>
    </div>

Answer 1

我不能为你做更多，这是一个 fiddle! 破解您的问题，不仅仅是解决方案，但希望它能激发您找到更好的方法和解决方案

jQuery:

var sec=0;
$('#first').on('mousewheel', function(event) {
     console.log('scroll, '+sec+", "+$("#fullpage").scrollTop());
     if(sec == 0 && $("#fullpage").scrollTop()!=0){
        $("#first").slideUp(300,function(){
          $("#second").show(function(){
            $("#second").scrollTop(1);
          });
        });
     }
});

$('#second').on('mousewheel', function(event) {
   if(sec==0){
    sec=1;
   }
   console.log($("#second").scrollTop());
   if($("#second").scrollTop() == 0){
     sec=0;
     $("#second").hide();
     $("#first").slideDown(300, function(){
        $("#fullpage").scrollTop(0);
     });
   }
});

以及添加到您的 CSS 中:

#first{
  margin-top:0px;
  margin-left:0px;
  height:401px;
  overflow-y: auto;
}
#second{
  display:none; 
  margin-top:0px;
  margin-left:0px;
  height:100%;
  overflow-y: auto;
}
#fullpage{
  height:400px;
  overflow: hidden;
  overflow-y: auto;
}

我真的很喜欢编程，但是我有自己的软件来开发和维护 ;)