原生js實現(xiàn)頁面滾動動畫

更新時間：2022年01月11日 10:07:54 作者：czx_2019

這篇文章主要為大家詳細介紹了原生js實現(xiàn)頁面滾動動畫，使用了requestAnimationFrame，文中示例代碼介紹的非常詳細，具有一定的參考價值，感為興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)頁面滾動動畫的具體代碼，供大家參考，具體內(nèi)容如下

需求：

1 頁面滾動到對應(yīng)板塊，左側(cè)對應(yīng)的索引高亮
2 點擊左側(cè)的索引，滾動到對應(yīng)的板塊

代碼如下，直接拷貝到html文件就可以使用

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>?
? ? ? ? html, body, ul {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .section li {
? ? ? ? ? ? height: 400px;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .indexs {
? ? ? ? ? ? width: 40px;
? ? ? ? ? ? background-color: #000000;
? ? ? ? ? ? color: #ffffff;
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? left: 20px;
? ? ? ? ? ? bottom: 50px;
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ? .indexs.active {
? ? ? ? ? ? display: block;
? ? ? ? }
? ? ? ? .indexs li {
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? user-select: none;
? ? ? ? }
? ? ? ? .indexs li.addcolor {
? ? ? ? ? ? background-color: red;
? ? ? ? }
? ? ? ? header {
? ? ? ? ? ? height: 1000px;
? ? ? ? ? ? background-color: purple;
? ? ? ? }
? ? ? ? footer {
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: rgb(15, 218, 15);
? ? ? ? }
? ? </style>
</head>
<body>
? ? <header></header>
? ? <ul class="section">
? ? ? ? <li style="background-color: palegreen;">1</li>
? ? ? ? <li style="background-color: rgb(15, 218, 15);">2</li>
? ? ? ? <li style="background-color: rgb(24, 203, 209);">3</li>
? ? ? ? <li style="background-color: rgb(167, 152, 251);">4</li>
? ? ? ? <li style="background-color: rgb(251, 152, 165);">5</li>
? ? ? ? <li style="background-color: palegreen;">6</li>
? ? ? ? <li style="background-color: rgb(15, 218, 15);">7</li>
? ? ? ? <li style="background-color: rgb(24, 203, 209);">8</li>
? ? ? ? <li style="background-color: rgb(167, 152, 251);">9</li>
? ? ? ? <li style="background-color: rgb(251, 152, 165);">10</li>
? ? </ul>
? ? <ul class="indexs">
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? ? ? <li>4</li>
? ? ? ? <li>5</li>
? ? ? ? <li>6</li>
? ? ? ? <li>7</li>
? ? ? ? <li>8</li>
? ? ? ? <li>9</li>
? ? ? ? <li>10</li>
? ? </ul>
? ? <footer></footer>
? ? <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
? ? <script type="text/javascript">

? ? ? ? let scrollTop = 0

? ? ? ? let section = document.querySelector('.section')

? ? ? ? let sectionLi = document.querySelectorAll('.section li')

? ? ? ? let indexs = document.querySelector('.indexs')

? ? ? ? let indexsLi = document.querySelectorAll('.indexs li')

? ? ? ? let ofseTop = 0
? ? ? ??
? ? ? ? let requestId = null
? ? ? ??
? ? ? ? let recordScrollTop = 0
? ? ? ? // 頁面滾動方向
? ? ? ? let scrollDirection = null
? ? ? ? let diffX = 0
? ? ? ? let diffY = 0
? ? ? ? let scrollAction = {x: 'undefined', y: 'undefined'}
? ? ? ? let lastI = 0
? ? ? ? let direction = null

? ? ? ? window.onscroll = myScroll
? ? ? ??
? ? ? ? function myScroll(e) {

? ? ? ? ? ? scrollTop = document.body.scrollTop || document.documentElement.scrollTop

? ? ? ? ? ? // 當(dāng)header滾出去時出現(xiàn)左側(cè)導(dǎo)航
? ? ? ? ? ? if (section.offsetTop -scrollTop <= 0) {
? ? ? ? ? ? ? ? indexs.classList.add('active')
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? indexs.classList.remove('active')
? ? ? ? ? ? }
? ? ? ? ? ? // 滾到sectionLi對應(yīng)的li時候 給indexs對應(yīng)的li紅色高亮
? ? ? ? ? ? for (let i = 0; i < sectionLi.length; i++) {

? ? ? ? ? ? ? ? if(sectionLi[i].offsetTop - scrollTop <= 30) {?
? ? ? ? ? ? ? ? ? ? for (let j = 0; j < indexsLi.length; j++) {
? ? ? ? ? ? ? ? ? ? ? ? indexsLi[j].classList.remove('addcolor')
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? indexsLi[i].classList.add('addcolor')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ??
? ? ? ? ? ? }

? ? ? ? }
? ? ? ? // 點擊indexs對應(yīng)的li 頁面滾回到section對應(yīng)的li
? ? ? ? for (let i = 0; i < indexsLi.length; i++) {
? ? ? ? ? ? indexsLi[i].addEventListener('click', function (e) {

? ? ? ? ? ? ? ? for (let j = 0; j < indexsLi.length; j++) {
? ? ? ? ? ? ? ? ? ? indexsLi[j].classList.remove('active')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // i就是被點擊的那個li的索引值
? ? ? ? ? ? ? ? indexsLi[i].classList.add('active')

? ? ? ? ? ? ? ? // 記錄下被點擊的li的offsetTop
? ? ? ? ? ? ? ? ofseTop = sectionLi[i].offsetTop

? ? ? ? ? ? ? ? // 第一種方法 jquery 動畫 這里不用jquery 用requestAnimationFrame
? ? ? ? ? ? ? ? // $('html,body').animate({?
? ? ? ? ? ? ? ? // ? ? scrollTop: ofseTop
? ? ? ? ? ? ? ? // }, 300)
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? // 第二種方法 requestAnimationFrame
? ? ? ? ? ? ? ? if(i - lastI > 0) {
? ? ? ? ? ? ? ? ? ? direction = 'down'
? ? ? ? ? ? ? ? } else if(i - lastI < 0){
? ? ? ? ? ? ? ? ? ? direction = 'up'
? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? ? // 更新lastI
? ? ? ? ? ? ? ? lastI = i
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? // 記錄點擊li的時候 當(dāng)前頁面卷出去了多少
? ? ? ? ? ? ? ? recordScrollTop = document.body.scrollTop || document.documentElement.scrollTop
? ? ? ? ? ? ? ? requestId = requestAnimationFrame(scrollAnimate)
? ? ? ? ? ? })
? ? ? ? }
? ? ? ??
? ? ? ??

? ? ? ? function scrollAnimate(){
? ? ? ? ? ? // 滾動條向下滾動 頁面向上翻 當(dāng)前頁面卷出去更多
? ? ? ? ? ? if (direction && direction === 'down') {
? ? ? ? ? ? ? ? recordScrollTop += 30
? ? ? ? ? ? ? ? if (recordScrollTop >= ofseTop) {
? ? ? ? ? ? ? ? ? ? direction = null
? ? ? ? ? ? ? ? ? ? return cancelAnimationFrame(requestId)
? ? ? ? ? ? ? ? }

? ? ? ? ? ? }
? ? ? ? ? ? // 滾動條向上滾動 頁面向下翻 當(dāng)前頁面卷出去更少
? ? ? ? ? ? if (direction && direction === 'up') {
? ? ? ? ? ? ? ? recordScrollTop -= 30
? ? ? ? ? ? ? ? if (recordScrollTop <= ofseTop) {
? ? ? ? ? ? ? ? ? ? direction = null
? ? ? ? ? ? ? ? ? ? return cancelAnimationFrame(requestId)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ??

? ? ? ? ? ? document.body.scrollTop = recordScrollTop
? ? ? ? ? ? document.documentElement.scrollTop = recordScrollTop
? ? ? ? ? ? requestId = requestAnimationFrame(scrollAnimate)
? ? ? ? ? ??
? ? ? ? }

? ? ? ? // 人為鼠標滾動判斷頁面滾動方向 這個函數(shù)在這個案例用不到
? ? ? ? function scrollFunc() {
? ? ? ? ? ? if (typeof scrollAction.x == 'undefined') {
? ? ? ? ? ? ? ? scrollAction.x = window.pageXOffset
? ? ? ? ? ? ? ? scrollAction.y = window.pageYOffset
? ? ? ? ? ? }
? ? ? ? ? ? diffX = scrollAction.x - window.pageXOffset
? ? ? ? ? ? diffY = scrollAction.y - window.pageYOffset
? ? ? ? ? ? if (diffX < 0) {
? ? ? ? ? ? ? ? // Scroll right
? ? ? ? ? ? ? ? scrollDirection = 'right'
? ? ? ? ? ? } else if (diffX > 0) {
? ? ? ? ? ? ? ? // Scroll left
? ? ? ? ? ? ? ? scrollDirection = 'left'
? ? ? ? ? ? } else if (diffY < 0) {
? ? ? ? ? ? ? ? // Scroll down
? ? ? ? ? ? ? ? scrollDirection = 'down'
? ? ? ? ? ? } else if (diffY > 0) {
? ? ? ? ? ? ? ? // Scroll up
? ? ? ? ? ? ? ? scrollDirection = 'up'
? ? ? ? ? ? }?
? ? ? ? ? ? scrollAction.x = window.pageXOffset
? ? ? ? ? ? scrollAction.y = window.pageYOffset
? ? ? ? }
? ? </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: