HTML-CSS: Vertical scroll snap
HTML-CSS : Exercise-7 with Solution
Using HTML, CSS create a scrollable container that will snap on elements when scrolling.
- Use display: grid and grid-auto-flow: row to create a vertical layout.
- Use scroll-snap-type: y mandatory and overscroll-behavior-y: contain to create a snap effect on vertical scroll.
- You can use scroll-snap-align with either start, stop or center to change the snap alignment.
HTML Code:
<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html><!-- Opening HTML tag -->
<head><!-- Opening head tag -->
<meta charset="utf-8"><!-- Declaring character encoding -->
<meta name="viewport" content="width=device-width"><!-- Setting viewport for responsiveness -->
<title>Using HTML, CSS create a scrollable container that will snap on elements when scrolling</title><!-- Title of the document -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<strong>Preview:</strong><!-- Strong tag for preview label -->
<div class="vertical-snap"><!-- Div container with class "vertical-snap" for scrollable container -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-1.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-2.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-3.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-4.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-5.jpeg"></a><!-- Anchor tag with image inside -->
<a href="#"><img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-6.jpeg"></a><!-- Anchor tag with image inside -->
</div><!-- Closing div tag -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->
Explanation:
- The HTML code creates a document with a scrollable container containing images.
- Comments are added using the HTML comment format (<!-- comment -->) to explain each line of code.
- The meta tags set the character encoding and viewport for the document.
- The title tag specifies the title of the document.
- Inside the body tag, a div container with the class "vertical-snap" is created for the scrollable container.
- Inside this container, multiple a tags are used to wrap img tags, creating clickable images.
- Each img tag contains the src attribute with the URL of the image.
- The strong tag is used for the preview label.
CSS Code:
<style>
/* Opening style tag for CSS */
.w3rcontainer{
border: 1px solid #cccfdb; /* Setting border style for the container */
border-radius: 2px; /* Setting border radius for rounded corners */
}
.vertical-snap {
margin: 0 auto; /* Setting margin to center the container horizontally */
display: grid; /* Using grid display */
grid-auto-flow: row; /* Allowing grid items to flow in rows */
gap: 1rem; /* Setting gap between grid items */
width: calc(180px + 1rem); /* Setting width for the container */
padding: 1rem; /* Adding padding to the container */
height: 480px; /* Setting height for the container */
overflow-y: auto; /* Adding vertical scroll overflow */
overscroll-behavior-y: contain; /* Controlling behavior when reaching the edge during scrolling */
scroll-snap-type: y mandatory; /* Specifying snapping behavior for scrolling */
}
.vertical-snap > a {
scroll-snap-align: center; /* Setting alignment for snapping */
}
.vertical-snap img {
width: 180px; /* Setting width for the images */
object-fit: contain; /* Controlling how the images fit within their container */
border-radius: 1rem; /* Adding border radius to the images for rounded corners */
}
</style>
<!-- Closing style tag -->
Explanation:
- The CSS code defines styles for a scrollable container with snapping behavior.
- Comments are added using the CSS commenting format (/* comment */) to explain each CSS rule and declaration.
- The .w3rcontainer class styles the container with a border and border radius.
- The .vertical-snap class styles the scrollable container with grid layout, defined height, and overflow properties for vertical scrolling.
- The scroll-snap-type property is used to specify the snapping behavior for scrolling.
- The .vertical-snap > a selector sets the alignment for snapping each grid item.
- Images within the container are styled with a specific width, object-fit, and border radius for proper display.
HTML-CSS Editor:
See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics