DEV Community: SAGNIK KUNDU

JavaScript Page Scroll Progress Bar

SAGNIK KUNDU — Wed, 12 Jan 2022 15:59:15 +0000

You must have come across different blog/news article websites with progress bar at the top of the page, which keeps on changing as you scroll through the whole page. Here, we will see how to implement it using HTML, CSS, and simple JavaScript.

You may directly access the codepen here.

First, add an empty div with id progressBar right after the opening body tag in HTML markup. This markup will stay fixed at the top of our page. To achieve that, let’s add some CSS properties to it.



<div class="progressBar"></div>

The div is initially empty, so any changes in the width of the indicator will affect the width of the whole div (aka the progress bar). Starting with a width:0, we will calculate and vary the style of this width, as we scroll through the whole page using JavaScript.



.progressBar {
        position: fixed;
    top: 0;
    left: 0;
    height: 8px;
    background: linear-gradient(to right, #ff5f6d, #ffc371);
    width: 0%;
    z-index: 100;
    transition: width 0.2s ease-out;
}

Let’s talk about the fun part, adding the JavaScript.

We select progressBar id and section selector. Then pass them as parameters in document method querySelector() which returns the first element within the document that matches the specified selector.



const progressBar = document.querySelector('.progressBar');
const section = document.querySelector('section');

Now declare an arrow function named scrollProgressBar, within which we make a few calculations. As scrollDistance defines the size of the section and its position relative to the viewport. Although in our case, we only need the top distance so we write section.getBoundingClientRect().top. As we need to convert this value into a percentage later, a positive value will be the best fit to work with.



let scrollDistance = -(section.getBoundingClientRect().top);

We could’ve used good old Math.abs() method to return the absolute value of the top, instead we will take the negative(-ve) value of it, to convert it into a positive value. While implementing further logic for the scroll bar we will find out why.

Imagine the complete rectangle is the viewport of the website. In the beginning, the viewport stays at the top of the webpage, when the width of the progress bar is at width:0. If the webpage is scrollable enough then page length exceeds the viewport height and our scrollProgressBar function kicks in.

After that, progressPercentage will be calculated using the following formula:

where, the numerator represents how much distance of the webpage has already been scrolled through and the denominator defines how much scroll distance is remaining to reach the end of the webpage.

Now one problem may arise that viewport height is the top viewport height so it never really reaches the bottom of the page. Thus, we need to subtract the document height from the section height.
Multiplying this fraction to 100 will eventually generate the percentage index for the progress bar.
Applying Math.floor() on it returns the largest integer less than or equal to the decimal value.



let progressPercentage =(scrollDistance/(section.getBoundingClientRect().height - document.documentElement.clientHeight)) * 100;

let val = Math.floor(progressPercentage);

With the help of this val, we calculate the width styling of the progress bar using the HTML DOM (that allows JavaScript to change the style of HTML elements) by concatenating it with the ‘%’ sign.



progressBar.style.width = val + '%';

Adding scroll event to the event listener finally gives the increase in progress bar width as the user scrolls through the page.



window.addEventListener('scroll', scrollProgressBar);

Up to this point have to realize why using Math.abs() is not a clever idea. It is simply because the scrollDistance never really reaches zero value (0). So for our convenience, we convert it to zero (0) for any value of val < 0.



if (val < 0) {
        progressBar.style.width = '0%';
    }

The complete code look something like:



const progressBar = document.querySelector('.progressBar');
const section = document.querySelector('section');

const scrollProgressBar = () => {
    let scrollDistance = -(section.getBoundingClientRect().top);
    let progressPercentage =
        (scrollDistance /
            (section.getBoundingClientRect().height - 
                document.documentElement.clientHeight)) * 100;

    let val = Math.floor(progressPercentage);
    progressBar.style.width = val + '%';

    if (val < 0) {
        progressBar.style.width = '0%';
    }
};

window.addEventListener('scroll', scrollProgressBar);

Now, if all the steps are done correctly you should see your very own progress bar animation as you scroll through the website, no matter what is the size of your screen, which means it is completely responsive.

Pseudo-elements in CSS -more than what you think

SAGNIK KUNDU — Sat, 08 Jan 2022 06:25:40 +0000

The versatility of CSS is used to control the appearance and the format of the HTML document tree. But one powerful feature that is often overlooked due to lack of understanding is pseudo-elements. As the name suggests they are not a part of the real DOM, rather a CSS abstraction that provides additional but inaccessible information in the webpage. This allows us to show something on the document which might not be present in the HTML content. Keeping in mind, we shouldn’t use it for actual content insertion, as pseudo-elements can’t be selected or manipulated on the page. They are more of a decorative content of the webpage.

We will discuss a few use cases of pseudo-elements and how you can implement them wisely in your next project. One thing to remember is the syntax, often they are written with single colon (:) as per the original specification but after level three specification (CSS3) to make it distinguishable from pseudo-classes it was changed to double-colon (::). And as we already know the goal of the web is to always keep it backward compatible, so both of them work to the date. But we should stick to double-colon (::).

You must have seen websites that are based on a color theme where selecting the text, changes the background color or the text color. This can be achieved by using ::selection pseudo-element. The ::selection pseudo-element matches the portion of an element that is selected by a user. Then properties like ::selection: color, background, cursor, and outline can be added on to them.

::selection {
  color: white;
  background: blue;
}

Other pseudo-elements like ::first-line and ::first-letter does exactly what you think. They are used to style the first line and the first letter of a text.

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

which results in something as:

Perhaps the most powerful among all are ::before and ::after pseudo-elements. Let’s see how they work:
In this example we have a heading (<h1>) tag in HTML body placed in the middle of the page, we can select the pseudo-element of this heading and add a ::before and ::after to it, with some styling. But it doesn’t work without an empty content string, which technically allows to target the particular element.

h1::before{
  content: 'before';
  background: #2867b2;
  color: white;
}
h1::after{
  content: 'after';
  background: #2867b2;
  color: white;
}

In the browser inspector it shows up and we can style it as if it is an empty div or span in our HTML. This can be very helpful to design content without adding unnecessary markup in HTML. A basic misconception that revolves around ::before and ::after is that, they appear before the HTML tag. That’s clearly not the case, pseudo-elements only occur before the targeted content of the element.

Imagine we have ordered (<ol>) and unordered (<ul>) lists in the HTML, and we want to add default emoji before each of them. A clean way to implement this without duplicating in the markup, will be to use ::before with the emoji as the content of the string.

  .task-list {
    list-style: none;
  }

  .task-list li {
    font-size: 2em;
    margin-bottom: 10px;
  }

  .task-list li::before {
    content: "✅";
    margin-right: 15px;
    font-size: 20px;
  }

Other use cases can be – different types of CSS Polygon stylings, Speech bubbles, creating CSS ribbons, gradient overlays, and borders, the list goes on.

Concerns
One thing to be cautioned about is not to use pseudo-elements on image (<img>) tags, as they just don’t work. The reason can be complicated, as images don’t have a spare ‘content’ model, they are called replaced-element thus image itself is the content. Keeping this in mind will save your precious time trying to debug why it’s not working. You can give it a read here.

Browser Support
When it comes to browser support, ::first-line and ::first-letter pseudo-elements were introduced in CSS1 so there is the basic support for them (except IE6 and IE7 have particularly buggy implementations; even modern browsers are not entirely consistent in the way that they handle the :first-line and :first-letter pseudo-elements). Here are some example bugs while using pseudo elements in different browsers.

On the other hand ::before and ::after are mostly classified as progressive enhancement, which can be classified as a modern approach to design and development. The :before and :after pseudo-elements were introduced in the CSS2.1 specification and are fully implemented in Firefox 3.5+, IE 8+, Safari 3+, Google Chrome, and Opera browsers.

Future of Pseudo-Elements
Just like any other development tool, pseudo-elements in CSS are only here to evolve with time. As new implementation will take place whereas, existing ones will be of no use as CSS3 continues to improve.

Custom Scrollbars with CSS - the Easy way

SAGNIK KUNDU — Thu, 06 Jan 2022 11:13:17 +0000

While building our favorite website we all tend to make it as perfect as possible, especially when it comes to the user interface. But a small addition to that amazing webpage can take your user’s tedious experience to the next level. Adding a customized scrollbar is one of them and actually, it is much easier to implement than you think. Without further due let’s dive into the coding.

The components of a scrollbar can be divided into its scrollbar-track and scrollbar-thumb. Track defines the base or channel and thumb is the section that helps us to navigate. Also depending on the direction of the scrollbar, it can be Horizontal and Vertical.

Customizing Scrollbar Design
The first thing we will take care of is a pseudo-element (A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph) and also -webkit browser prefix.

Next, defining the scroll bar width is important. For vertical scrollbars width and height for the horizontal ones needs to be specified.

::-webkit-scrollbar {
  width: 1rem;
  /*height: 1rem;*/
}

With that set, now we can design the scrollbar track, by adding background-colours to it.

::-webkit-scrollbar-track {
  background: #ffffff;
}

After we set a color to the base, we can move on to scrollbar thumb. Here things get a bit tricky, as this will be used by the user to navigate through the website. We may set a solid background color to the thumb or to make it more soothing here we are using linear-gradient() property.

::-webkit-scrollbar-thumb {
  background: linear-gradient(#FF5403,#EF2F88);
}

Just like any other keyword ::-webkit-scrollbar-thumb can be used to implement other pseudo-elements or selectors. One good example will be to decrease/increase the opacity on mouse hovering.

Changing the appearance of the scrollbar-thumb can make it look a lot nicer. Keep in mind applying border-radius to the thumb can also affect the way currently our scrollbar-track looks.

::-webkit-scrollbar-thumb {
  background: linear-gradient(#FF5403,#EF2F88);
  border-radius: 100vw;
  border: 0.20rem solid #ffffff;
}

To fit the track perfectly with the thumb we may apply the same border radius on scrollbar-track also. Adding margin from both top and bottom can be a sign of clever designing too, this can be done using CSS margin-block property.

::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 100vw;
  margin-block: 0.5rem;
}

But, imagine a website that consists of both horizontal and vertical scrollbars, applying ::webkit-scrollbar will change the appearance for both of them. But what if you want only to focus on the vertical bar, the way to do that is by targeting the body of the webpage.

body::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 100vw;
  margin-block: 0.5rem;
}

Similarly, for targeting horizontal bars we will use vertical-scroll to keep the body scrollbar at default and apply changes to all the horizontal ones.

vertical-scroll::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 100vw;
  margin-block: 0.5rem;
}

Concerns
There are a few details that we should take care of while designing a custom scrollbar:

firstly make sure there is a high enough contrast between your scrollbar track and thumb color, that way it’s easier for the user/reader to navigate. You can always head on to websites like colorhunt.co for color scheme references. And also remember to implement a scrollable element via adding a value other than visible to the overflow property. It’s recommended to use the auto keyword as it will only show the scrollbar if the content exceeds its container.