时间戳

首页 > 解决方案 > 平滑滚动根本不平滑；平滑滚动仅滚动多个像素而不滚动到指定的 div

javascript - 平滑滚动根本不平滑；平滑滚动仅滚动多个像素而不滚动到指定的 div

问题描述

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

我读过这个：点击时平滑滚动到特定的div，我无法适应它。我不明白是做什么scrollTop: $("#page2").offset().top的。

我的问题是卷轴正在“捕捉”。这可能是因为我已经申请scroll-snap了容器。

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

每当我按下该箭头时，我都希望获得第二页的完整视图。它应该向下滚动直到#page2hasheight: 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

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

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

标签： javascriptjquerycss

解决方案

嗨，你可以试试这个解决方案。基本上我在单击事件开始时删除了 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')
    });
});

推荐阅读