平滑滚动根本不平滑； 平滑滚动仅滚动一定数量的像素而不滚动到指定的 div

Question

我正在尝试添加这样的点击平滑滚动效果： https : //michalsnik.github.io/aos/

我读过这篇文章： Smooth scroll to specific div on click但我无法适应它。 我不明白scrollTop: $("#page2").offset().top是做什么的。

我的问题是滚动条正在“咬合” 。 这可能是因为我在容器上应用了scroll-snap 。

此外，当您位于页面之间并单击向下滚动箭头时，它会向上或向下移动。

每当我按下该箭头时，我都希望以全屏方式显示第二页。 它应该向下滚动，直到#page2具有height: 100vh或者它占据整个视口。

 // eliminate scroll-bar var child = document.getElementById('child-container'); child.style.right = child.clientWidth - child.offsetWidth + "px"; //scroll down effect on scroll-down-arrow $(".scroll-down-arrow").click(function() { $('html,body,#child-container').animate({scrollTop: $("#page2").offset().top}, 'slow', 'linear'); });

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* *** index.html - START *** */ body, html { height: 100%; width: 100%; overflow: hidden; } #parent-container { height: 100%; width: 100%; overflow: hidden; position: relative; } #child-container { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; /* exact value is given through JavaScript */ overflow: auto; scroll-snap-type: both proximity; } header { height: 100%; background-color: grey; background-attachment: fixed; background-position: bottom center; background-repeat: no-repeat; background-size: cover; text-align: center; scroll-snap-align: center; } header h1 { font-size: 32px; font-weight: bold; position: sticky; top: 5%; margin-bottom:10px; } header p { position: sticky; width: 450px; text-align: center; margin: auto; margin-top: 100px; font-size: 1.5em; } header .scroll-down-arrow { position: absolute; left: 50%; bottom: 20px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 30px; height: 30px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; left: 50%; transform: translate(-50%, 0%) rotate(45deg); animation: fade_move_down 3s ease-in-out infinite; cursor: pointer; } /*animated scroll arrow animation*/ @keyframes fade_move_down { 0% { transform:translate(0,-15px) rotate(45deg); opacity: 0; } 25% {opacity: 1;} /* 50% { opacity: 1; } */ 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } .container_page_2 { width: 100%; height: 100vh; scroll-snap-align: center; overflow: hidden; position: relative; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div id="parent-container"> <div id="child-container"> <!-- #header --> <header> <div class="nav-container"> <ul> <li></li> <li></li> <li></li> </ul> </div> <a href="#page2"><h1 id="sticky-title">Lorem ipsum</h1></a> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p> <div class="scroll-down-arrow"></div> </header> <!-- #page2 --> <div id="page2" class="container_page_2"> <div class="column active"> <div class="content"> <h1>1</h1> <div class="box"> <h2>background-attachment: fixed;</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi! </p> </div> </div> <div class="bg bg1"></div> </div> <div class="column"> <div class="content"> <h1>2</h1> <div class="box"> <h2>background-attachment: scroll;</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi! </p> </div> </div> <div class="bg bg2"></div> </div> <div class="column"> <div class="content"> <h1>3</h1> <div class="box"> <h2>background-attachment: scroll;</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi! </p> </div> </div> <div class="bg bg3"></div> </div> <div class="column"> <div class="content"> <h1>4</h1> <div class="box"> <h2>background-attachment: fixed;</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi! </p> </div> </div> <div class="bg bg4"></div> </div> </div>

https://codepen.io/bleah1/pen/gjYBgQ

我还没有添加第二页的所有元素，但没关系，因为滚动不受影响。 正如你所看到的，它一点也不光滑，它实际上非常活泼。

你怎么认为 ？ 我想保留滚动快照，因为我喜欢这个想法。

Answer 1

你好，你可以试试这个解决方案。 基本上我在单击事件开始时删除了 css，然后在 scrollTop 事件结束时添加了它。 记得从你的 css #child-container删除它

$(".scroll-down-arrow").click(function() {
  $('#child-container').css('scroll-snap-type','')
    $('html,body,#child-container').animate({
       scrollTop: $("#page2").offset().top}, 'slow', 'linear')
      .promise()
      .done(() => {$('#child-container')
      .css('scroll-snap-type','both proximity')
    });
});

Answer 2

根据@Ekin Alcar 的回答，我能够解决我的问题。 我遵循他的想法，使用$('#child-container').css('scroll-snap-type','');从#child-container中删除了scroll-snap-type css 属性$('#child-container').css('scroll-snap-type',''); 在原始脚本中，像这样：

$(".scroll-down-arrow-container").click(function() {
    $('#child-container').css('scroll-snap-type','');
    $('html, body, #child-container').animate({
            scrollTop: $(window).height()
        }, 1000)
    .promise()
    .done(() => {$('#child-container')
        .css('scroll-snap-type','both proximity')
    });
});

.css的诀窍在于它只能删除在.html文件中的style标签中使用的属性。 它不适用于.css样式表。

来自API 的文档：

但是，它不会删除已在样式表或 <style> 元素中使用 CSS 规则应用的样式。

像这样的scroll-snap-type: both proximity; 已从.css文件中删除并添加到.html文件中：

<div id="child-container" style="scroll-snap-type: both proximity;">

此外，为了修复在页面之间向上或向下滚动的效果，我将scrollTop: $("#page2").offset().top替换为scrollTop: $(window).height() 。 不要问我为什么它有效，但它确实有效。