我遇到了這個頁面，我對滾動方向如何將中間頁面更改為水平然后恢復為垂直印象非常深刻。
我完全不知道這是怎么做到的。有人可以填寫我嗎？
uj5u.com熱心網友回復：
如果你看看你的滾動條，方向實際上并沒有改變。在水平部分，“滾動”區域獲取position: fixed并填滿螢屏，然后在您繼續向下滾動時向左移動。當沒有水平滾動時，這會產生水平滾動的錯覺。
這是一個示例，盡管沒有垂直和水平滾動之間的過渡。
document.onscroll = () => {
// adjust for the difference between window height and width
let percentScrolled = window.pageYOffset / window.innerHeight;
let toScroll = percentScrolled * window.innerWidth;
// scroll horizontally
document.getElementById("scroll").style.left = "-" toScroll "px";
}body {
width: 100vw;
height: 500vh;
overflow-x: hidden;
}
div {
width: 500vw;
position: fixed;
}<div id = "scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac leo nulla. Donec volutpat consequat elit ut tincidunt. Proin id purus sed nulla lacinia eleifend sed porttitor neque. Vestibulum volutpat porta ex. Aenean accumsan metus eu euismod semper. Phasellus viverra tortor eget enim ultrices, quis dignissim lectus posuere. Nullam turpis nisl, fringilla gravida interdum nec, semper et tellus. Etiam vitae rutrum ligula. Nulla lobortis massa odio, id tempor leo dictum sit amet.
Nulla ut porta orci. Maecenas pulvinar est ac est accumsan, non consequat augue lobortis. Morbi semper sollicitudin eros, sit amet lacinia nulla varius a. Nam dignissim faucibus risus, eleifend tincidunt dolor scelerisque a. Quisque tempus, quam efficitur feugiat laoreet, sapien eros aliquam erat, auctor feugiat lacus ipsum id nisl. In nisi urna, laoreet eget pulvinar dignissim, maximus laoreet augue. Vivamus euismod mauris nec felis posuere, eu maximus ante volutpat. Integer porttitor urna quis vehicula feugiat. Integer justo nibh, rutrum pulvinar massa quis, molestie pretium ipsum.</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/340830.html
標籤：javascript html css 滚动
上一篇：使用我的RESTAPI不斷收到DELETE400（錯誤請求）
下一篇：打造鏈上Bloomberg