我创建了一个网页，当你垂直滚动时，它会水平滚动。我想要滚动时的滚动值。这是我所做的* { 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);});
2 回答
慕莱坞森
TA贡献1810条经验 获得超4个赞
您可以使用element.scrollTop和element.scrollLeft分别获取已滚动的垂直和水平偏移量。如果您关心整个页面，元素可以是 document.body。如果您需要百分比，您可以将它与element.offsetHeight和element.offsetWidth（同样，元素可能是主体）进行比较。
添加回答
举报
0/150
提交
取消