Scroll interaction that even beginners can create. Part 1 JavaScript

hello :)

 

Here's an update :)

 

1. All classes have been added with additional hands-on practice and explanation of how to create scroll interactions using jquery.

If there are people who find the class difficult, it would be good to first refer to the practical part where you explain while writing code, and then use the explanation part to understand the pattern again.

 

 

2. I found a bug in the section 5-2 section movement interaction . This bug occurred when using the trackpad in the Chrome browser on a MAC environment (the iMac Magic Mouse was fine).

The bug content is

If you use a trackpad or similar to quickly scroll when the section you want to move one space at a time is placed at the top of the browser,

The first section movement animation does not run, but the animation runs after that. (This happens intermittently)

 

After analyzing the bug, we found that in the case of Macs, there is a problem when entering the section to be moved.

Specifies that scroll events will not fire when entering a section.

In other words, we solved this by adding a wheel event, blocking the wheel when entering the section, and branching to prevent the default action for the event from occurring.

 

However, when only the wheel event was used, a bug occurred in the Windows environment.

Why does a bug occur when only the wheel event is used in a Windows environment?

On Windows, the frequency at which mouse wheel events occur is considerably lower than on Mac, so a bug has been introduced that prevents the scroll values from being retrieved properly.

In simple terms, this means that the number of times the scroll event and wheel event are called is different.

 

So, in Windows, we process the code that was previously written as is.

That is, a class will be added that handles branching to use the wheel event on Mac and the scroll event on Windows.

 

Since this bug only occurs in Chrome on Mac and Google can patch it, I will upload a bug fix video without changing the existing class.

(When changing the scroll position with a scroll event during UI implementation, adding motion is a bit tricky.)

 

3. All vanilla js changes are complete .

A class will be added to change the parts that were previously written in jQuery to vanilla js. (This is not a class to create jQuery functions.)

The code was written without considering IE and older browsers.

 

I think even beginners can change the rest of the code on their own, except for sections 5 and 6, because the vanilla js code is so simple to change.

 

The completed code converted to vanilla js will be written in the last step file of each section and uploaded first . (Late January - early February)

 

And I plan to upload the course on how to change to vanilla js in February. (It's so easy that most people probably won't watch it though^.^;) :D

I hope the updated lessons will be helpful to those who are having difficulties.

 

 

Well then, I wish you a happy new year and a happy Seollal holiday.

Thank you :D