在滚动部分的末尾添加动画

时间：2019-10-31 15:01:27

标签： javascript css

我制作了this网页。一共有3个部分#sidebar，#postbar和#content，它们有各自的滚动条。我想添加一个动画，让用户知道他们已经到达了本节的结尾。

我可能使用错误的关键字进行搜索，但是大多数信息要么是关于动画滚动的事情，要么是使用AOS或jQuery解决方案之类的库跳到顶部或底部。是否有任何原生方法可以仅使用javascript或简单的CSS库添加此类动画？

2 个答案:

答案 0 :(得分：0)

您应该尝试Intersection Obeserver :)现在，它得到了很好的支持。

const mySections = document.querySelectorAll('.section');

observer = new IntersectionObserver(entries => {
 entries.forEach(entry => {
   if (entry.intersectionRatio > 0) {
     console.log('in the view');
   }  else {
     console.log('out of view. FIRE EVENT!');
   }
 });
});

mySections.forEach(image => {
  observer.observe(image);
});

答案 1 :(得分：0)

您可以检查滚动位置与偏移高度的比较

var sidebar = document.getElementById('sidebar');
sidebar.addEventListener('scroll', function(e) {


  if( e.target.scrollTop >= (e.target.scrollHeight - e.target.offsetHeight))
  {
     if (this.classList.contains('animate')) {
      document.querySelector('#sidebar li:last-child').classList.remove('animate');
    }
    document.querySelector('#sidebar li:last-child').classList.add('animate');
  }


});
.animate{
  color: #ffffff;
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}
@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Bootstrap Sidebar</title>

    <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'>

    <link rel="shortcut icon" href="#">
 


    <!-- <script src="{{ url_for('static', filename='script.js')}}"></script> -->
    <!-- Font Awesome JS -->

    <script>
    
            console.log('default')
            document.addEventListener('DOMContentLoaded', function () {
            window.addEventListener('scroll', function(e) {
console.log(window.scrollY);
console.log(e.target);
if(e.target.tagName == 'ul'){
  if( e.target.scrollTop === (e.target.scrollHeight - e.target.offsetHeight))
  {
    alert('done');
  }
}

});
                var postlist = document.getElementsByClassName("postlist");
                var showPost = function() {
                    console.log('CLICKED')
                    var ps ='';// {{ postSource|safe }};
                    var idOfPost = this.id;
                    var iframe = document.getElementById("serviceFrameSend")
                    iframe.setAttribute("src", ps[idOfPost])
                };
                for (var i = 0; i < postlist.length; i++) {
                    postlist[i].addEventListener('click', showPost, false)
                }
            });
    </script> 


    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
        integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">
    </script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
        integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">
    </script>
    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
    </script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
    </script>
    <style>

        /* 
    DEMO STYLE
*/

/*@import "https://fonts.googleapis.com/css?family=Menlo:300,400,500,600,700";*/

/* definition */
/* @font-face {
    font-family: Menlo;
    src: url('fonts/Menlo.ttc');
    font-weight: normal;
    font-style: normal;
  } */

@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
body {
    /* font-family: 'Menlo', sans-serif; */
    font-family: 'Fira Sans', sans-serif;
    background: #2B3137;
    overflow:hidden;
    height: 100%;
}

p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: #C7C7C7; /*원래inherit*/
    text-decoration: none;
    transition: all 0.3s;
}


.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 0px dashed #ddd;  
    margin: 40px 0;
}

/* -------------------------------F--------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    height : 100px;
    align-items: stretch;
}

#sidebar {

    background: #2B3137;
    color: #fff;
    transition: all 0.3s;

    height:95%;
    position:fixed;
    display:inline-block;
    overflow:scroll;
    width : 190px;
    padding : 10px;
}

#notebook_title{
    padding:20px;
    text-align:center;
    border-bottom: 0.0px solid #2B3137;
    box-shadow: 0 0.1px 0 #C7C7C7;
    color:#C7C7C7;
  }

#postbar {
    width : 240px;
    background: #2B3137;
    color: #fff;
    transition: all 0.3s;
    border-right: 0.1px solid #2A3446;
    border-left: 0.1px solid #2A3446;

    height:95%;
    position:fixed;
    display:inline-block;
    overflow:scroll;
    margin-left:190px;
    padding : 10px 10px 10px 0px;

}

#sidebar.active {
    margin-left: -250px;
}


#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
    margin : 2px 0px 5px 0px;
}

#posttbar .postbar-header {
    padding: 20px;
    background: #6d7fcc;
    /* border-bottom: 0.1px solid #2B3137; */
    box-shadow: 0 0.1px 0 #C7C7C7;
    
}

#sidebar ul.components {
    padding: 0px 0;
    border-bottom: 0px solid #47748b; /*색깔지움*/
}

#postbar ul.components {
    /* padding: 20px 0; */
    border-bottom: 0px solid #47748b;/*색깔지움*/
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#postbar ul p {
    color: #fff;
    padding: 10px;
}


#sidebar ul li a {
    padding: 10px;
    font-size: 0.9em;
    display: block;
    color:#C7C7C7;
}



#postbar ul li a {
    padding: 10px;
    font-size: 0.9em;
    display: block;
    height : 60px;         /*포스트바블록사이즈*/
    list-style-type:none;
    color:#C7C7C7;
    /* border-bottom: 0.1px solid #2B3137; */
    box-shadow: 0 0.1px 0 #C7C7C7;


}
/*bullet제거*/
/* #postbar li {
    list-style-type:none;
} */


#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;    /*움직일때 색깔*/
}


#postbar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}

#postbar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}




/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */



#content{
    width: 100%;
    /* padding: 20px; */
    /* min-height : 1000px; */
    height: 100vh;
    transition: all 0.3s;
    background-color:#2B3137;
    margin-left:420px;   
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: 0px; /* 원래 -250 */
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}
        </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="wrapper">
        <!-- Sidebar  -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>HEADER</h3>
            </div>
            <ul class="list-unstyled components">
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>LAST</a>
                </li>
            </ul>
        </nav>
    
        <!-- POST BAR -->
        <nav id="postbar">
            <div id="notebook_title">{{currNoteBook}}</div>
            <ul class="list-unstyled components">
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>list</a>
                </li>
                <li>
                    <a class=postlist>LAST</a>
                </li>
            </ul>
        </nav>
            <!-- Page Content  -->
            <div id="content">
                Some Contents
            </div>
    </div>
    <!-- partial -->
</body>



</html>

相关问题
最新问题