Change language
Python.Engineering Wiki Javascript Add Delete Class On Scroll

Javascript Add Delete Class On Scroll

around | exp | find | JavaScript | log | open | sin
Michael Zippo Michael Zippo 04.11.2021

👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!

Scroll bars and user experience

Users are now used to some experience when browsing websites. For example, you would expect a company logo in the top left corner of a site to take you to the home page. But what if it does n’t work? What if everything on this site did opposite of what you thought it would be?

Imagine if there was a scroll bar, but when you move the scroll button on your mouse or slide your finger across your device’s touchpad, nothing happens . It would be considered a horrible user experience.

What - what makes or breaks a good user experience can be a job in its own right, but a part of it - it works very definitely capacity and bars scroll to hide for for aesthetic reasons.

Scroll bars are great indicators of what we can expect to see on a web page. If we see a scroll bar, we would expect it to be necessary to scroll down to view the content. When you don’t see a scroll bar, it’s usually for one of two reasons:

  1. What you see is what you get - the height and width of the visible area (the screen) correspond to the height and width of the site.
  2. Site design includes a sort of arrow or the function of animation that shows that the more content is available via the scrolling. Only when you start scrolling does the scroll bar appear. The default is to stay hidden until then.

    3. As a developer, implementing the correct use of the scroll bar will improve the user experience of a site, which will keep customers on the site.

Note Side: be sure to use horizontal scroll bars when intentionally you want to use them. If they appear unintentionally on your site, it’s usually because something is wrong with the component sizing . Do not hide the horizontal scroll bars on the goal when they should not be present.

CSS implementation

The first thing to note about this implementation is that all major browsers are created equal. What works for Firefox will not work for Chrome or Internet Explorer and vice versa. CSS uses what we call provider prefixes or browser prefixes to help us provide support for multiple browsers. We present them below:

Cheat Sheet supplier prefix

vendor prefix Browser covering
-webkit- Chrome, Safari, newer versions of Opera, and most iOS browsers including Firefox for iOS
-moz - Firefox (non iOS)
-o- Older versions of Opera
-ms- Internet Explorer and MS Edge

URL: credit: MDN - CSS Prefixes

Alt Text: Mozilla Developer Network has created a handy cheat sheet to remember which prefix to use

Caption: MDN created a handy cheat sheet to remember which prefix to use for the browser

The question then becomes, how do we know when we need prefixes and when they are not? CSS creators are always experimenting with new properties and new ways of doing things - if there’s one enough new property, it’s probably not yet compatible with all browsers.

Fortunately, there are tools that take a look at your CSS and add the prefixes you need. You can also do it manually and use a site like caneuse or documents for you MDN to help determine browser compatibility.

Let code

When we run this code in Chrome it should produce a gray background div and some text you can scroll through. The two most common implementations are included - Firefox is at the top of the code in the