[英]Scrolling horizontally by full page on Space Bar key press
所有主流瀏覽器都允許通過按鍵盤上的空格鍵進行垂直頁面滾動。 但是,如果頁面完全水平,則此快捷方式不起作用。 此外,按Home和End鍵對於轉到頁面的開頭和結尾不起作用。
如何使用普通的JavaScript
( ECMAScript 6
)重新制作此功能以進行水平滾動?
按空格鍵應水平滾動100vw
。 理想情況下,滾動應該具有behavior: "smooth"
效果。
這是我的HTML
和CSS
代碼:
* { margin: 0; padding: 0 } html { height: 100% } html, body, section { display: flex; flex-grow: 1 } body { scroll-snap-type: x mandatory; scroll-snap-points-x: repeat(100%); overflow-x: auto } section { display: grid; place-items: center; flex: 1 0 100%; scroll-snap-align: center } section:nth-of-type(1) { background: orange } section:nth-of-type(2) { background: limeGreen } section:nth-of-type(3) { background: royalBlue } h2 { color: white }
<section><h2>1</h2></section> <section><h2>2</h2></section> <section><h2>3</h2></section>
在容器上使用scrollTo()
,在您的情況下document.documentElement
,可以非常令人信服地克隆標准的垂直空格鍵滾動行為。
如果您在與示例不同的整頁上實現此操作,則應注意將container
更改為正確的元素,並在滾動捕捉部分不等於100vw
window.innerWidth
// Set wrapAround to true to go back to 1 after 3 let scrollAmount = 0, wrapAround = true; const container = document.documentElement; window.onload = () => { document.body.onkeyup = (event) => { switch (event.code) { case 'Space': { scrollAmount += window.innerWidth if (wrapAround && scrollAmount >= container.scrollWidth) { scrollAmount = window.innerWidth * -1; } break; } case 'End': { scrollAmount = container.scrollWidth; break; } case 'Home': { scrollAmount = 0; break; } case 'PageDown': { scrollAmount += window.innerWidth if (wrapAround && scrollAmount >= container.scrollWidth) { scrollAmount = window.innerWidth * -1; } break; } case 'PageUp': { scrollAmount -= window.innerWidth if (wrapAround && scrollAmount < 0) { scrollAmount = container.scrollWidth; } break; } } container.scrollTo({ top: 0, left: scrollAmount, behavior: 'smooth' }); } } // Reset the scrollAmount if the user scrolls back manually // If we wouldn't do this it would jump from 1 to 3 if the // user scrolls back from 3 to 1 and presses space window.onscroll = (event) => { scrollAmount = container.scrollLeft; };
* { margin: 0; padding: 0 } html { height: 100% } html, body, section { display: flex; flex-grow: 1 } body { scroll-snap-type: x mandatory; scroll-snap-points-x: repeat(100%); overflow-x: auto; } section { display: grid; place-items: center; flex: 1 0 100%; scroll-snap-align: center } section:nth-of-type(1) { background: orange } section:nth-of-type(2) { background: limeGreen } section:nth-of-type(3) { background: royalBlue } h2 { color: white }
<section><h2>1</h2></section> <section><h2>2</h2></section> <section><h2>3</h2></section>
您也可以使用錨點進行水平滾動...這里的小例子(在空格鍵上滾動)
var page = 1; document.body.onkeyup = function(e){ if(e.keyCode == 32){ page ++; location.hash = "#box-" + page; } }
ul { list-style: none; padding: 0; margin: 0; background: #efefef; font-size: 0; text-align: center; } li { display: inline-block; padding: 0; margin: 0; font-size: 16px; line-height: 20px; } li > a { padding: 10px; } #content { white-space: nowrap; font-size: 0; text-align: center; width: 100%; overflow-x: scroll; overflow-y: hidden; height: 250px; /*this is indicative*/ } #content > div { display: inline-block; width: 100%; font-size: 16px; height: 100%; max-height: 100%; padding-top: 20px; } #content > div > p { width: 300px; padding: 10px 0; background: #ccc; margin: 0 auto; }
<ul> <li> <a href="#box-1">link 1</a> </li> <li> <a href="#box-2">link 2</a> </li> <li> <a href="#box-3">link 3</a> </li> <li> <a href="#box-4">link 4</a> </li> <li> <a href="#box-5">link 5</a> </li> <li> <a href="#box-6">link 6</a> </li> <li> <a href="#box-7">link 7</a> </li> <li> <a href="#box-8">link 8</a> </li> <li> <a href="#box-9">link 9</a> </li> <li> <a href="#box-10">link 10</a> </li> </ul> <div id="content"> <div id="box-1"> <p>Some text 1</p> </div> <div id="box-2"> <p>Some text 2</p> </div> <div id="box-3"> <p>Some text 3</p> </div> <div id="box-4"> <p>Some text 4</p> </div> <div id="box-5"> <p>Some text 5</p> </div> <div id="box-6"> <p>Some text 6</p> </div> <div id="box-7"> <p>Some text 7</p> </div> <div id="box-8"> <p>Some text 8</p> </div> <div id="box-9"> <p>Some text 9</p> </div> <div id="box-10"> <p>Some text 10</p> </div> </div>
https://jsfiddle.net/5up46L9v/5/ =>(更高的片段效果更好)
香草 js 中的平滑 scrool 對我來說沒什么難的......使用像 Jquery 這樣的庫......
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.