我創(chuàng)建了一個(gè)網(wǎng)頁(yè),當(dāng)你垂直滾動(dòng)時(shí),它會(huì)水平滾動(dòng)。我想要滾動(dòng)時(shí)的滾動(dòng)值。這是我所做的* { 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')但沒(méi)有得到任何滾動(dòng)值。我嘗試在 chrome 中調(diào)試 Js 代碼,但函數(shù)甚至沒(méi)有在滾動(dòng)時(shí)調(diào)用。window.addEventListener('scroll', () => { console.log(Scrolled);});
如何獲得水平垂直滾動(dòng)的滾動(dòng)值
慕斯709654
2021-08-20 16:15:26