CODEWITHSUNDEEP
cssscrollscrollbarvertical-scrollingpure-css
BOOMHUNK
BOOMHUNK

Reputation: 396

pure-css reverse scrolling trick, without using js or scroll-timeline

I need to make a simple box to go down the screen when I scroll down (move in reverse of the natural behavior) but only using stable CSS features and not any line of js.

is that possible?

I've already kinda achieved this:

` 

            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <style>
                body {
                  margin: 0;
                  padding: 0;
                  position: relative;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }


                .inverted-container {
                  scroll-margin-top: 500px;
                  position: fixed;
                  overflow-y: scroll;

                  inset: 0;
                  transform: rotate(180deg);
                  -ms-overflow-style: none;
                  scrollbar-width: none;
                }


                .inverted-container::-webkit-scrollbar {
                  display: none;
                }



                .container {
                  background-color: rgba(0, 0, 0, 0.149);
                  min-height: 120vh;
                  width: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: flex-start;
                }

                .moving-element {
                  width: 100px;
                  height: 100px;
                  background-color: rgb(63, 63, 223);

                }
              </style>
            </head>

            <body>
              <div>
                Lorem ipsum dolor sit ... (long content to make the body's scrolling content visible.)
              </div>
              <div class="inverted-container">
                <div class="container">
                  <div class="moving-element">

                  </div>
                </div>
              </div>

            </body>

            </html>

`

but since this is using a 180deg rotated overflowing container, overlayed on the body content, it has two problems:

  1. the scrolling behavior is prioritized, first the overlay container scrolls and then the body content starts scrolling. but I need them to act at the same time while scrolling the mousewheel.

  2. It only works with mouse scrollwheel but I want dragging the body's scrollbar to cause the effect too.

Upvotes: 1

Views: 218

Answers (0)

Related Questions