逐節滾動
[英]scroll to section by section
問題描述
我有 HTML 標記：
HTML：
<body>
<header></header>
<nav>
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
</ul>
</nav>
<section id="one"></section>
<section id="two"></section>
<footer></footer>
</body>
其中部分是全屏的（寬度：100%；高度：100%；）並且菜單具有絕對位置。
問題：
- 如何使用鼠標滾動（或鍵）滾動和捕捉到每個部分？
- 當滾動到最后一部分時，再次向下滾動到 #one並重復它。
- 當我點擊鏈接時，它會滾動到部分。
感謝您的建議，想法，代碼。
2 個解決方案
解決方案1
16 已采納 2013-10-02 16:13:43
如果你想要與IE8,9 ，Opera 12等舊瀏覽器的更多兼容性以及更多功能，我創建了一個可以使用fullPage.js的JavaScript庫：
它提供的一些功能：
- 兼容舊版瀏覽器，如IE 8，不支持CSS 3。
- 鏈接部分與菜單和導航項目符號
- 部分和幻燈片的URL錨點
- 響應的高度和寬度選項
- 回調和數十種選項和方法
- 支持水平滑塊
- 觸摸支持移動設備，平板電腦和觸摸屏桌面
- 使用鍵盤快捷鍵滑動頁面
另外：
- 大量的fullPage.js擴展來獲得高級功能。
- 有許多使用它的wordpress和CMS主題，例如Themify主題
- Angular指令，Ember插件，Ruby Gems，10月CMS插件......
- 它已經被大公司使用（谷歌，索尼，麥當勞，英國航空，EA，沃達豐，Mi ......）
解決方案2
3 2020-05-06 00:39:11
有趣
我竊取了這段代碼，更改了布局並嘗試添加您提到的功能（1. scroll-snap + 2. 單擊鏈接時滾動）。 不幸的是，我無法使用第二個功能。
- 添加滾動快照不是問題
您需要scroll-snap-type: y mandatory; 在容器上scroll-snap-align: start; 在這些部分。
var doc = window.document, context = doc.querySelector('.js-loop'), clones = context.querySelectorAll('.is-clone'), disableScroll = false, scrollHeight = 0, scrollPos = 0, clonesHeight = 0, i = 0; function getScrollPos () { return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0); } function setScrollPos (pos) { context.scrollTop = pos; } function getClonesHeight () { clonesHeight = 0; for (i = 0; i < clones.length; i += 1) { clonesHeight = clonesHeight + clones[i].offsetHeight; } return clonesHeight; } function reCalc () { scrollPos = getScrollPos(); scrollHeight = context.scrollHeight; clonesHeight = getClonesHeight(); if (scrollPos <= 0) { setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling } } function scrollUpdate () { if (!disableScroll) { scrollPos = getScrollPos(); if (clonesHeight + scrollPos >= scrollHeight) { // Scroll to the top when you've reached the bottom setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling disableScroll = true; } else if (scrollPos <= 0) { // Scroll to the bottom when you reach the top setScrollPos(scrollHeight - clonesHeight); disableScroll = true; } } if (disableScroll) { // Disable scroll-jumping for a short time to avoid flickering window.setTimeout(function () { disableScroll = false; }, 40); } } function init () { reCalc(); context.addEventListener('scroll', function () { window.requestAnimationFrame(scrollUpdate); }, false); window.addEventListener('resize', function () { window.requestAnimationFrame(reCalc); }, false); } if (document.readyState !== 'loading') { init() } else { doc.addEventListener('DOMContentLoaded', init, false) }
html, body { height: 100%; overflow: hidden; } .Loop { position: relative; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; } section { position: relative; text-align: center; height: 100%; scroll-snap-align: start; } ::scrollbar { display: none; } body { font-family: "Avenir Next", Helvetica, sans-serif; font-weight: normal; font-size: 100%; position: relative; } nav { position: absolute; top: 0; left: 0; width: 100%; z-index: 10; } nav ul { display: flex; justify-content: space-around; margin: 0; padding: 1rem 0; } nav ul li{ display: flex; justify-content: space-around; } .nav-link{ text-decoration: none; color: grey } .one { background: black; } .two { background: darkblue; } .three { background: lightgreen; } .four { background: lightcoral; } .five { background: lightskyblue; } .six { background: orange; } h1 { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; font-size: 80px; letter-spacing: 5px; color: #fff; text-transform: uppercase; }
<nav> <ul> <li><a class="nav-link" href="#one">one</a></li> <li><a class="nav-link" href="#two">two</a></li> <li><a class="nav-link" href="#three">three</a></li> <li><a class="nav-link" href="#four">four</a></li> <li><a class="nav-link" href="#five">five</a></li> <li><a class="nav-link" href="#six">six</a></li> </ul> </nav> <main class="Loop js-loop"> <section class="one" id="one"> <h1>One</h1> </section> <section class="two" id="two"> <h1>Two</h1> </section> <section class="three" id="three"> <h1>Three</h1> </section> <section class="four" id="four"> <h1>Four</h1> </section> <section class="five" id="five"> <h1>Five</h1> </section> <section class="six" id="six"> <h1>Six</h1> </section> <!-- These blocks are the same as the first blocks to get that looping illusion going. You need to add clones to fill out a full viewport height. --> <section class="one is-clone"> <h1>One</h1> </section> <section class="two is-clone"> <h1>Two</h1> </section> </main>
- 單擊鏈接時添加滾動是一個問題
使用普通容器，您只需要添加scroll-behaviour: smooth; 到它。 但在這里，如果你這樣做，你將失去循環錯覺，因為你會看到它滾動回第一個而不是看似繼續。 （它還會啟動我無法修復的無限來回滾動）
var doc = window.document, context = doc.querySelector('.js-loop'), clones = context.querySelectorAll('.is-clone'), disableScroll = false, scrollHeight = 0, scrollPos = 0, clonesHeight = 0, i = 0; function getScrollPos () { return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0); } function setScrollPos (pos) { context.scrollTop = pos; } function getClonesHeight () { clonesHeight = 0; for (i = 0; i < clones.length; i += 1) { clonesHeight = clonesHeight + clones[i].offsetHeight; } return clonesHeight; } function reCalc () { scrollPos = getScrollPos(); scrollHeight = context.scrollHeight; clonesHeight = getClonesHeight(); if (scrollPos <= 0) { setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling } } function scrollUpdate () { if (!disableScroll) { scrollPos = getScrollPos(); if (clonesHeight + scrollPos >= scrollHeight) { // Scroll to the top when you've reached the bottom setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling disableScroll = true; } else if (scrollPos <= 0) { // Scroll to the bottom when you reach the top setScrollPos(scrollHeight - clonesHeight); disableScroll = true; } } if (disableScroll) { // Disable scroll-jumping for a short time to avoid flickering window.setTimeout(function () { disableScroll = false; }, 40); } } function init () { reCalc(); context.addEventListener('scroll', function () { window.requestAnimationFrame(scrollUpdate); }, false); window.addEventListener('resize', function () { window.requestAnimationFrame(reCalc); }, false); } if (document.readyState !== 'loading') { init() } else { doc.addEventListener('DOMContentLoaded', init, false) }
html, body { height: 100%; overflow: hidden; } .Loop { position: relative; height: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; scroll-behavior: smooth; } section { position: relative; text-align: center; height: 100%; scroll-snap-align: start; } ::scrollbar { display: none; } body { font-family: "Avenir Next", Helvetica, sans-serif; font-weight: normal; font-size: 100%; position: relative; } nav { position: absolute; top: 0; left: 0; width: 100%; z-index: 10; } nav ul { display: flex; justify-content: space-around; margin: 0; padding: 1rem 0; } nav ul li{ display: flex; justify-content: space-around; } .nav-link{ text-decoration: none; color: grey } .one { background: black; } .two { background: darkblue; } .three { background: lightgreen; } .four { background: lightcoral; } .five { background: lightskyblue; } .six { background: orange; } h1 { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; font-size: 80px; letter-spacing: 5px; color: #fff; text-transform: uppercase; }
<nav> <ul> <li><a class="nav-link" href="#one">one</a></li> <li><a class="nav-link" href="#two">two</a></li> <li><a class="nav-link" href="#three">three</a></li> <li><a class="nav-link" href="#four">four</a></li> <li><a class="nav-link" href="#five">five</a></li> <li><a class="nav-link" href="#six">six</a></li> </ul> </nav> <main class="Loop js-loop"> <section class="one" id="one"> <h1>One</h1> </section> <section class="two" id="two"> <h1>Two</h1> </section> <section class="three" id="three"> <h1>Three</h1> </section> <section class="four" id="four"> <h1>Four</h1> </section> <section class="five" id="five"> <h1>Five</h1> </section> <section class="six" id="six"> <h1>Six</h1> </section> <!-- This block is the same as the first block to get that looping illusion going. You need to add clones to fill out a full viewport height. --> <section class="one is-clone"> <h1>One</h1> </section> <section class="two is-clone"> <h1>Two</h1> </section> </main>
我知道這段代碼還不是 100% 可用，但我認為它可以引導我們找到更好的答案。
解決方案3
2 2020-05-10 10:11:37
在這種情況下，您可以使用 ID。
為您的部分設置 ID 並添加錨標記並將 href 屬性設置為您的部分 ID。
<a href="#YourSectionID">Go Up</a> <!-- don't forget # before write your ID. -->
不要忘記將滾動行為設置為平滑以平滑滾動。
滾動到部分
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.