滾動到滾動上的元素（整頁滾動）

Question

當我滾動或使用滾輪時，我嘗試滾動到某個元素。 無論我的目的是只做一次，而不是像這樣顯示的整個網站。

問題是，首先它直接在頁面加載時滾動，其次它在滾動或我使用滾輪時不滾動。

這是我拍的，我的代碼：

componentDidMount() {
    window.addEventListener('wheel',  () => {
        document.querySelector("#services").scrollIntoView(true)
    })
    window.addEventListener('scroll',  () => {
        document.querySelector("#services").scrollIntoView(true)
    })      
}

如果我聽我的邏輯，我所做的是：當檢測到滾輪（或滾動）時滾動到這一點。

所以我的問題是，為什么它不能按預期工作？

編輯

我發現下面的 css 更容易出錯

html {
  scroll-behavior: smooth;
}

我嘗試了其他可行的方法，但只有在沒有上面的 CSS 的情況下，使用 css 它不起作用，這很模糊。

componentDidMount() {
    window.addEventListener('wheel', () => {
        location.hash = "#services"
    })  
}  

所以它直接滾動到元素，如果 css 沒有設置。 但它沒有任何意義，我需要這個css...

Answer 1

我在某個點嘗試了自動向上/向下滾動，即使我們使用滾動行為：平滑也不會滯后。

基本上，我將每個 div 的 position 設為絕對值，並且當滾動值超過某個數字時，它會根據滾動方向（即向上滾動或向下滾動）觸發 animation，從而使其具有自動滾動效果。

最初我只使用 javascript 來實現相同的效果，但 window.scrollTo() function 在滾動行為平滑時滯后，我檢查了很多平滑滾動但無法改變滾動速度的平滑解決方案。將為每次滾動更改進行平滑過渡，因此當 window.scrollY 從 x(let) 更改為 x+1 時，它將進行過渡，然后將 x+1 更改為 x+2 等等......導致真正的緩慢滾動就像電影的片尾字幕一樣（但它們也有點快）。

希望這對你有用

編輯：還要記住，屏幕分辨率為 1366 x 768。在更高分辨率（1920 x 1080）下，自動滾動轉換會更早觸發。

全屏查看

 var lastScrollValue = window.pageOffsetY || document.documentElement.scrollTop; window.addEventListener('scroll', function() { var scrolled = window.scrollY; var present_scroll_value = window.pageOffsetY || document.documentElement.scrollTop; if (scrolled >= 625 && scrolled <= 854) { if (present_scroll_value > lastScrollValue) { //scroll Down document.getElementsByClassName('scroll_automatic_page')[0].style.animation = "scrollup 2s 1 forwards"; document.getElementsByClassName('third_page')[0].style.animation = "moveUp 1s 1s 1 forwards"; } else { //scroll Up document.getElementsByClassName('scroll_automatic_page')[0].style.animation = "scrolldown 2s 1 forwards"; document.getElementsByClassName('third_page')[0].style.animation = "moveDown 1s 1 forwards"; } } lastScrollValue = present_scroll_value <= 0? 0: present_scroll_value; }, false);

 * { margin: 0px; padding: 0px; font-family: 'Arial'; scroll-behavior: smooth; overflow-x: hidden; } body { max-height: 200vh; }.first_page { position: absolute; background-color: #63B5E8; height: 100vh; width: 100vw; z-index: 10; overflow-y: hidden; }.first_page h1 { font-size: 290px; -webkit-text-fill-color: #2E80B3; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: black; }.scroll_automatic_page { position: absolute; background-color: #000000; width: 100vw; height: 700vh; margin-top: 100vh; z-index: 9; overflow: hidden; animation-fill-mode: forwards; } @keyframes scrollup { from { transform: translateY(0vh); overflow: hidden; } to { transform: translateY(-700vh); overflow: hidden; } } @keyframes scrolldown { from { transform: translateY(-700vh); overflow: hidden; z-index:20; } to { transform: translateY(0vh); overflow: hidden; z-index:20; } }.scroll_automatic_page h1 { font-size: 500px; padding-top: 200px; letter-spacing: 8px; color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white; }.letter { position: absolute; padding-top: 0px; }.third_page { position: absolute; height: 200vh; width: 100vw; margin-top: 100vh; z-index: 8; }.third_page h1 { text-align: center; font-size: 200px; padding-top: 200px; -webkit-text-fill-color: black; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white; } @keyframes moveDown { from { transform: translateY(200px); } to { transform: translateY(900px); } } @keyframes moveUp { from { transform: translateY(700px); } to { transform: translateY(180px); } }

 <div class="first_page"> <h1>FIRST PAGE</h1> </div> <div class="scroll_automatic_page"> <h1>SCROLL DOWN:)</h1> </div> <div class="third_page" id="thirdpage"> <h1> THE END </h1> </div>