feature:

滚动更丝滑

components/Header.js

@@ -1,7 +1,6 @@
 import { useGlobal } from '@/lib/global'
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import throttle from 'lodash.throttle'
 import { useCallback, useEffect, useState } from 'react'
 import Typed from 'typed.js'
 
@@ -23,23 +22,32 @@ export default function Header () {
       }))
     }
   })
-  const scrollToCenter = () => {
-    document.getElementById('wrapper').scrollIntoView({ behavior: 'smooth' })
-  }
-
   const { theme } = useGlobal()
   // 监听滚动
   let windowTop = 0
-  const scrollTrigger = useCallback(throttle(() => {
-    if (window.scrollY > windowTop & window.scrollY < window.innerHeight) {
-      scrollToCenter()
+  let autoScroll = false
+
+  const autoScrollEnd = () => {
+    windowTop = window.scrollY
+    autoScroll = false
+    console.log('滚动结束回调', windowTop)
+  }
+  const scrollTrigger = useCallback(() => {
+    console.log('触发 top', windowTop, 'y', window.scrollY, autoScroll)
+    if (window.scrollY > windowTop & window.scrollY < window.innerHeight & !autoScroll) {
+      // console.log('滚中间', windowTop, window.scrollY, window.innerHeight)
+      autoScroll = true
+      scrollTo(window.innerHeight, autoScrollEnd)
     }
-    if (window.scrollY < windowTop & window.scrollY < window.innerHeight) {
-      window.scroll({ top: 0, behavior: 'smooth' })
+    if (window.scrollY < windowTop & window.scrollY < window.innerHeight & !autoScroll) {
+      // console.log('滚上', windowTop, window.scrollY, window.innerHeight)
+      autoScroll = true
+      scrollTo(0, autoScrollEnd)
     }
     windowTop = window.scrollY
+
     updateTopNav()
-  }, 500))
+  })
 
   const updateTopNav = () => {
     if (theme !== 'dark') {
@@ -65,7 +73,7 @@ export default function Header () {
 
     <div className='absolute z-10 flex h-screen items-center justify-center w-full text-4xl md:text-7xl text-white'>
       <div id="typed" className=' text-center font-serif'></div>
-      <div onClick={scrollToCenter} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'><FontAwesomeIcon icon={faArrowDown} /></div>
+      <div onClick={() => { scrollTo(window.innerHeight, autoScrollEnd) }} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'><FontAwesomeIcon icon={faArrowDown} /></div>
     </div>
 
     <div className='bg-black bg-cover bg-center h-screen md:-mt-14  animate__fadeInRight animate_fadeIn'
@@ -73,3 +81,25 @@ export default function Header () {
     </div>
 </header>
 }
+
+/**
+ * Native scrollTo with callback
+ * @param offset - offset to scroll to
+ * @param callback - callback function
+ */
+function scrollTo (offset, callback) {
+  const fixedOffset = offset.toFixed()
+  const onScroll = function () {
+    if (window.pageYOffset.toFixed() === fixedOffset) {
+      window.removeEventListener('scroll', onScroll)
+      callback()
+    }
+  }
+
+  window.addEventListener('scroll', onScroll)
+  onScroll()
+  window.scrollTo({
+    top: offset,
+    behavior: 'smooth'
+  })
+}

components/SideAreaRight.js

@@ -74,7 +74,7 @@ const SideAreaRight = ({
 
       <Analytics postCount={postCount}/>
 
-      <div className="sticky top-14">
+      <div className="sticky top-8">
           {showToc && (
           <section className='pb-10 mb-5 rounded-xl shadow-md bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
             <div className='border-b text-center text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>

layouts/BaseLayout.js

@@ -1,6 +1,7 @@
 import CommonHead from '@/components/CommonHead'
 import FloatDarkModeButton from '@/components/FloatDarkModeButton'
 import Footer from '@/components/Footer'
+import Header from '@/components/Header'
 import JumpToBottomButton from '@/components/JumpToBottomButton'
 import JumpToTopButton from '@/components/JumpToTopButton'
 import LoadingCover from '@/components/LoadingCover'
@@ -8,10 +9,9 @@ import SideAreaRight from '@/components/SideAreaRight'
 import TopNav from '@/components/TopNav'
 import { useGlobal } from '@/lib/global'
 import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useRef } from 'react'
-import { useRouter } from 'next/router'
-import Header from '@/components/Header'
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
  * @param children
@@ -77,7 +77,7 @@ const BaseLayout = ({
       {/* 首页头图 */}
       {router.asPath === '/' && <Header/>}
 
-      <div id='wrapper' className='flex justify-center flex-1 mx-auto md:pt-16 pb-12'>
+      <div id='wrapper' className='flex justify-center flex-1 mx-auto md:pt-8 pb-12'>
 
           {/* <div id='left' className='hidden lg:block flex-col w-72'>
             <SideAreaLeft targetRef={targetRef} title={meta.title} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />