我創建了一個網頁，當你垂直滾動時，它會水平滾動。我想要滾動時的滾動值。這是我所做的* { padding: 0; margin: 0;}#log { position: fixed; width: 500px; height: 25px; border: solid black 1px; z-index: 999;}img{ position: fixed; z-index: 999; top: 50%; left: 90vw; transform: translate(0, -50%); cursor: pointer; user-select: none;}.outer-wrapper { height: 100vw; width: 100vh; transform: rotate(-90deg) translateX(-100vh); transform-origin: top left; overflow-x: hidden; overflow-y: scroll; position: absolute; scrollbar-width: none; /*---Firefox property---*/ -ms-overflow-style: none; /*---i.e. family---*/}::-webkit-scrollbar { display: none; /*---Chrome and Safari*/}.wrapper { display: flex; flex-direction: row; height: 100vh; width: 400vw; transform: rotate(90deg) translateY(-100vh); transform-origin: top left;}.slide { height: 100vh; width: 100vw;}.slide1 { background-color: teal;}.slide2 { background-color: tomato;}.slide3 { background-color: slateblue;}.slide4 { background-color: palevioletred;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Horizonral scroll</title></head><body> <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px"> <div class="outer-wrapper"> <div class="wrapper"> <div class="slide slide1"></div> <div class="slide slide2"></div> <div class="slide slide3"></div> <div class="slide slide4"></div> </div> </div> <script type="text/javascript" src="app.js"></script></body></html>我嘗試使用window.addEventListener('scroll')但沒有得到任何滾動值。我嘗試在 chrome 中調試 Js 代碼，但函數甚至沒有在滾動時調用。window.addEventListener('scroll', () => { console.log(Scrolled);});
如何獲得水平垂直滾動的滾動值
慕斯709654
2021-08-20 16:15:26
