Introduction

In 2019, MDN surveyed thousands of developers around the world to gain insight on what’s presently frustrating — and what’s not — about the web.

From the survey, the top frustration for web developers was browser compatibility.

Browser compatibility has always been an issue with web developers and designers who are trying to build a web application that’s compatible with different browsers, especially Internet Explorer 11 (IE11).

In this article, we’ll discuss how Google Chrome intends to solve this problem by focusing on browser compatibility and what it means for scrolling.

What is browser compatibility?

Browser compatibility refers to the ability for a particular web application to appear fully functional on different browsers.

Assuming you’re developing a web application that you want to be compatible with multiple browsers, you have to code the HTML, CSS, and JavaScript to do so, or create different versions of a website based on the platform your users are accessing your website from. This has been a continuous issue in the developers’ ecosystem.

According to the MDN survey, the Chromium team has been trying to resolve some of these compatibility issues on Google Chrome. Here are just a few ways they are trying to improve compatibility.

Flexbox

When it comes to structuring your web application, Flexbox is a powerful tool for laying out the structure of your web application. It is one of the top tools for browser compatibility.

As powerful as Flexbox is, there are some new improvements that will be introduced in Chrome 84 that will help solve compatibility issues. The Chrome team is looking at re-architecting the Chromium Flexbox implementation with the modern LayoutNG engine. To get started with Flexbox, you can check out the beginner’s guide here.

CSS Grid

CSS Grid is another great tool for browser compatibility, and, according to the Google Chrome team, CSS Grid is supported in Chromium browsers. It’s also great to note that even though Chromium still doesn’t support Subgrid at the time of writing, it is currently in development and may be added as part of the new LayoutNG engine. For more information about CSS Grid, read this informative article.

Scrolling

In the survey responses, many types of scrolling-related issues came up, such as:

• The effect of shrinking/hiding URL bar when scrolling on mobile devices, based on the viewport size
• Difficulties controlling native scroll, so developers end up using JavaScript instead. This includes overscroll behavior and scroll snapping
• Differences in behavior or support for scrolling-related APIs like scrollIntoView

Luckily, you can solve these issues using CSS Scroll Snapping. Let’s demonstrate how to it.

CSS Scroll Snapping allows you to lock the viewport of certain elements after a user has finished scrolling. You can use it to build a great interaction like this.

CSS Scroll Snapping was introduced in 2016 and has improved significantly over the past few years, and it supports a majority of browsers and their latest versions.

To begin, create an HTML file.

<div class="container">
 <section class="child"></section>
 <section class="child"></section>
 <section class="child"></section>
 <p>...</p>
</div>

Now, add the following CSS attributes:

.container {
 scroll-snap-type: y mandatory;
}

.child {
 scroll-snap-align: start;
}

Here, the y value simple scroll container snaps to positions in its horizontal axis only, while mandatory means that the visual viewport of this scroll container will rest on a snap point if it isn’t currently scrolled.

You can read more about CSS Scroll Snapping and different property values here.

Let’s look at how we can achieve scroll lock properly by using an NPM package called Body Scroll Lock.

Import the package into your project.

yarn add body-scroll-lock
// or
npm install body-scroll-lock

Next, create an index.js file and paste in the following code:

const bodyScrollLock = require('body-scroll-lock');
const disableBodyScroll = bodyScrollLock.disableBodyScroll;
const enableBodyScroll = bodyScrollLock.enableBodyScroll;

Then, query select all the elements:

const targetElement = document.querySelector('.child');

// Disable Body Scrolling for the element
disableBodyScroll(targetElement);

// Renable the Scrollin with the library
enableBodyScroll(targetElement);

And that’s all you need to do!

Conclusion

In this article, we learned how we can handle browser compatible scrolling using CSS Scroll Snap and Body Scroll Lock NPM package. Keep Coding!