Html & Css

Creating a Perfect Mobile-Friendly Scroll Container with CSS

0

Learn how to implement a scrollable slider for a smooth and intuitive user experience on mobile using CSS. This article will delve into the details of creating a horizontally scrollable slider with CSS styles, focusing particularly on hiding scrollbars and enhancing user experience with scroll snapping.

1. Basic Container Styling

First, let’s style the basic container for the slider.

.sliderContainer {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior: auto;
}
  • `width: 100%;`: Sets the width of the slider container to 100% of its parent element, ensuring it takes up the full width of the screen.
  • `overflow-x: auto;`: Allows horizontal scrolling, making the content scrollable when it exceeds the container’s width.
  • `overflow-y: hidden;`: Hides the vertical scrollbar, ensuring it does not appear.
  • `scroll-snap-type: x mandatory;`: Enables horizontal scroll snapping, making the slider stop at each item automatically.
  • `-ms-overflow-style: none;`: Hides the scrollbar in IE and Edge browsers.
  • `scrollbar-width: none;`: Hides the scrollbar in Firefox.
  • `overscroll-behavior: auto;`: Maintains default scroll behavior when scrolling beyond the container’s boundaries.

2. Hiding the Scrollbar

To hide the scrollbar in Webkit-based browsers (Chrome, Safari, etc.), add the following style.

.sliderContainer::-webkit-scrollbar {
    display: none;
}

This style hides the scrollbar in Webkit browsers, providing a clean UI.

3. Item Container Styling

Next, define the styles for each item container.

.itemContainer {
    scroll-snap-align: start;
    position: relative;
    display: block;
    height: 140px;
    padding-left: 16px;
}
  • `scroll-snap-align: start;`: Aligns each item to the start of the scroll container.
  • `position: relative;`: Sets the position relative, allowing child elements to be positioned based on this element.
  • `display: block;`: Makes the item a block-level element.
  • `height: 140px;`: Sets the height of the item container.
  • `padding-left: 16px;`: Adds 16px padding to the left of each item.

4. Adding Padding to the Last Item

Add padding to the right of the last item to ensure the end of the slider aligns neatly.

.itemContainer:last-child {
    padding-right: 16px;
}

5. Styling the Images

Round the corners of the images inside the item containers.

.itemContainer img {
    border-radius: 10px;
}
  • `border-radius: 10px;`: Applies a 10px border radius to the images, making their corners rounded.

Complete Example

Here is the complete example code for implementing a mobile-friendly slider.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Scroll Container Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sliderContainer">
        <div class="itemContainer">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="itemContainer">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="itemContainer">
            <img src="image3.jpg" alt="Image 3">
        </div>
        <div class="itemContainer">
            <img src="image4.jpg" alt="Image 4">
        </div>
        <div class="itemContainer">
            <img src="image5.jpg" alt="Image 5">
        </div>
    </div>
</body>
</html>
.sliderContainer {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    overscroll-behavior: auto;
}

.sliderContainer::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.itemContainer {
    scroll-snap-align: start;
    position: relative;
    display: block;
    height: 140px;
    padding-left: 16px;
}

.itemContainer:last-child {
    padding-right: 16px;
}

.itemContainer img {
    border-radius: 10px;
    width: 100%; /* Optional: Ensures the images are responsive */
    height: auto; /* Optional: Ensures the images maintain aspect ratio */
}

Conclusion

We have now covered all the CSS styles needed to implement a scrollable slider on mobile. These styles enhance the user experience and provide a mobile-friendly design. Try applying them and adjust as necessary to create an even more refined slider.

Leave a Reply