Question

我正在尝试自动滚动这些部分，但它只适用于s1和s3。根据我认为代码应该如何工作，s3应该跳转到s2，但它会跳转到s1。轮子事件确实被拾起，我检查了alert（）;所有其他代码行都会被执行。它是scrollTop不起作用，可能是因为布局，但我无法发现问题。我会很感激任何线索。谢谢！

<div class="header" id="main">
    <div class="menu.container" >
        <span style="font-size:30px;cursor:pointer;margin-right: 2vh;color: 
whitesmoke;" onclick="openOffcanvas();openNav3()">&#9776; </span>         
    </div>
</div>

<div class="therest" >
    <div id="myCanvasNav" class="overlay3" onclick="closeOffcanvas()" 
style="width: 0%; opacity: 0;"></div>
    <section  id="s1" class="section">  
        <div  class="content">
            <h1>CompanyX Goes All in With React Native</h1>
            <h2>Starting in 2018, CompanyX Engine will support React Native.
</h2>
            <img src="5.jpg" />

        </div>    
    </section>
    <section id="s2">  
         <div  class="content">

        </div>
    </section>
    <section id="s3" style="background-color: aqua">  
        <div  class="content">

        </div>
     </section>


 </div>
 <script id="jsbin-javascript">
 var headerHight = $("main").height();   
var doWheel = true;    
document.getElementById("s1").addEventListener('wheel', function(e) {
    e.preventDefault();

    if(!doWheel) return;
    doWheel = false;

    $('div.therest').animate({
    scrollTop: $("#s2").offset().top - headerHight
    }, 600);

    setTimeout(turnWheelBackOn,1000);


});
function turnWheelBackOn() { doWheel = true; }

document.getElementById("s2").addEventListener('wheel', function(e) {
  e.preventDefault();
    if(!doWheel) return;
    doWheel = false;

    $('div.therest').animate({
    scrollTop: $("#s3").offset().top - headerHight
    }, 600);

    setTimeout(turnWheelBackOn, 1000);

});
document.getElementById("s3").addEventListener('wheel', function(e) {
  e.preventDefault();
    if(!doWheel) return;
    doWheel = false;

    $('div.therest').animate({
    scrollTop: $("#s2").offset().top - headerHight
    }, 600);

    setTimeout(turnWheelBackOn, 1000);

});

</script>

Answer 1

我不知道你的css设置，但通常我们使用以下代码强制窗口滚动到元素。确保使用html和body来设置滚动功能。您可以将以下代码替换为您的活动。

$("html, body").animate({
    scrollTop: $("#s2").offset().top - $(".header").height() //Base on your stcky header, you need to minus the header height
},1000 /*scroll in ms*/);

编辑：减去您的标题高度

你不能为div上的滚动设置动画，它不应该工作。

自动滚动部分网站

1 个答案: