This is the 15th day of my participation in the More text Challenge. For more details, see more text Challenge

preface

I was looking at someone else’s blog today and I saw an interesting effect where the mouse wheel scroll the page left and right, and some other effects that look pretty cool, so I thought I’d try to do something similar with native JS. It’s easy to write and discover, but if you dig deep into the mechanics and the differences between browsers, it’s still very complicated. After all, there’s no end to learning

Train of thought

If you want to scroll around the page with the mouse wheel, first listen for the mouse scroll event, then prevent the default scroll event, and add the scroll effect we need to the page. That is:

  • Listen for mouse scroll events
  • Prevents default scrolling events
  • Added left-right page scrolling effect

With that in mind, it’s time to start looking at the JS events involved.

JS event

Wheel events

wheelEvent represents an event that is triggered when a user scrolls a mouse wheel or similar input device. This event is a standard wheel event interface. Early browsers implemented itMouseWheelEventandMouseScrollEventTwo wheel event interfaces, both of which are not standard and have poor compatibility among browsers. Therefore, the developer should use the standard event interface instead of the two non-standard interfaces. Let’s take a look at compatibility on CaniUser:Basically, so let’s print in Google ChromeWheelEventHave a look at:

So which of these attributes are we using? The only ones we can use are wheelDelta or deltaY, which are used to indicate scrolling on the Y-axis. After a bit of research, I found that wheelDelta is only supported by some browsers and deltaY is supported by almost all browsers, so the scrolling value should be based on deltaY.

Since we decided to usedeltaYProperties, of course, to check compatibility in caniUser:

After testing, it is found that in 360 browser, QQ browser, Edge browser, Google Browser, scroll up deltaY value is -125, scroll down deltaY value is 125. In Firefox, if you scroll up, deltaY is -54, and scroll down, deltaY is -54.

ScrollLeft event

ScrollLeft is used to set or get the distance between the left edge of the object and the leftmost end of the currently visible content in the window. I’ve written a blog post, Talking about getting the distance from the current element to various parts of the page, in which I’ve made a picture that goes into more detail:

ScrollLeft and scrollTop mean the same thing, but in different directions.

Code implementation

The idea has, JS event also has, the following is the code implementation.

    <style>
        .box{
            display: flex;
            overflow: scroll;
        }
        .item{
            width: 100vw;
            height: 300vh;
            flex-shrink: 0;
        }
        .item:nth-child(1) {background-image: linear-gradient(rgb(250.93.93), rgb(89.0.255));
        }
        .item:nth-child(2) {background-image: linear-gradient(rgb(240.250.150), rgb(104.170.255));
        }
        .item:nth-child(3) {background-image: linear-gradient(rgb(240.144.253), rgb(153.252.128));
        }
    </style>



    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>



    <script>
        let box = document.querySelector('.box')
        box.addEventListener('wheel'.(event) = >{
            event.preventDefault()
            box.scrollLeft += event.deltaY
        })
    </script>
Copy the code

The running effect is as follows:

Works perfectly! Of course, this is just a simple effect, and there are more cool page functions can be made based on this idea, such as scrolling the mouse image bigger, or more than one image overlap fade fade to achieve the flower effect.

Afterword.

How time flies, has been more 15 days, maybe more depth of the blog is not so high, but more important or stick to it ~ if there is some confusion in the short term, then find a thing to do is the most correct choice. People always stage ups and downs, always need some inexplicable adhere to the pleasure of their own.

PS: today is the 15th day of my Denver nuggets challenge, half a month! Where there is a will, there is a way. Come on, everybody

The list of articles with further challenges is as follows:

  • Flex layout container elements and project elements attributes
  • 2021.06.02 how to play with CSS Gradient Background
  • How to Use SVG to create Text Effects along Arbitrary Paths
  • 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
  • Git Commit Specification for team management: How many people don’t write commit records?
  • 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
  • 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
  • On Prototypes and Prototype Chains in 11 Aspects
  • A Closer Look at JavaScript scope and Scope Chains
  • What is a closure in JavaScript?
  • 2021.06.11 pure CSS Implementation: Cool Video Text Mask Effects
  • Apply a free API and use native JS to create typewriter-like vertical lines of text
  • Pure CSS implementation: Zebra stripes inside multi-line Text boxes
  • 2021.06.14 “Native JS implementation touch slide listening event”