时间戳

首页 > 解决方案 > 如何在水平垂直滚动时获得滚动值

javascript - 如何在水平垂直滚动时获得滚动值

问题描述

我创建了一个在垂直滚动时水平滚动的网页。我想要滚动时的滚动值。这是我所做的

* {
    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 lang="en">
<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);
});

标签： javascripthtmlcss

解决方案

您可以使用element.scrollTop和element.scrollLeft分别获取已滚动的垂直和水平偏移量。如果您关心整个页面，元素可以是 document.body。如果需要百分比，您可以将其与element.offsetHeightand element.offsetWidth（同样，元素可能是主体）进行比较。

推荐阅读