CODEWITHSUNDEEP
javascripthtmlcss
Nev Ken
Nev Ken

Reputation: 18

How to get scrolled value on horizontally-vertical scrolling

I created a web page that scrolls horizontally when you scroll vertical. And I want the scrolled value on scrolling. Here is what I have done

* {
    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>

I tried using window.addEventListener('scroll') but not getting any scrolled value. I tried debugging Js code in chrome but function is not even invoking on scrolling.

window.addEventListener('scroll', () => {
    console.log(Scrolled);
});

Upvotes: 0

Views: 556

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You need to set addEventListener on scroll of div.outer-wrapper and get scrollTop

document.getElementsByClassName("outer-wrapper")[0].addEventListener('scroll', function(e) {
    var div = document.getElementsByClassName("outer-wrapper")[0].scrollTop;
    console.log(div);
});
* {
    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>

Upvotes: 0

Sohan
Sohan

Reputation: 588

You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.

Upvotes: 0

Related Questions