Solomon Eseme A software developer who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend. Follow me: Twitter, Facebook, LinkedIn, about.me

What Chromium’s browser compatibility means for scrolling

2 min read 713

Google Chromium Icon

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.

We made a custom demo for .
No really. Click here to check it out.

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!

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Full visibility into your web apps

    LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

    In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

    .
    Solomon Eseme A software developer who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend. Follow me: Twitter, Facebook, LinkedIn, about.me

    Leave a Reply