HTML-CSS: Custom scrollbar
HTML-CSS : Exercise-20 with Solution
Using HTML, CSS customizes the scrollbar style for elements with scrollable overflow.
- Use ::-webkit-scrollbar to style the scrollbar element.
- Use ::-webkit-scrollbar-track to style the scrollbar track (the background of the scrollbar).
- Use ::-webkit-scrollbar-thumb to style the scrollbar thumb (the draggable element).
- Note: Scrollbar styling doesn't appear to be on any standards track. This technique only works on WebKit-based browsers.
HTML Code:
Explanation:
- This HTML code represents a basic webpage structure with a container div and custom scrollbar styling.
- The <!--License: https://bit.ly/3GjrtVF--> comment indicates the license information for the code.
- <!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
- <html> marks the start of the HTML document.
- <head> contains meta-information about the HTML document, such as character encoding and viewport settings.
- The <title> element sets the title of the webpage.
- <body> contains the content of the HTML document.
- <div class="w3rcontainer"> defines a container for the content.
- <div class="custom-scrollbar"> defines a container with custom scrollbar styling.
- Within the custom scrollbar container, there is a <p> element containing Lorem Ipsum text.
- The content within the <p> element consists of several lines of Lorem Ipsum text, separated by <br /> tags for line breaks.
CSS Code:
Explanation:
- The CSS code customizes the scrollbar style for elements with scrollable overflow.
- .w3rcontainer styles the container with a border and rounded corners.
- .custom-scrollbar styles the elements with a scrollbar by setting a fixed height and enabling vertical scrolling.
- ::-webkit-scrollbar targets the scrollbar specifically for webkit browsers like Chrome and Safari.
- ::-webkit-scrollbar-track styles the track of the scrollbar with a background color and rounded corners.
- ::-webkit-scrollbar-thumb styles the thumb (the draggable part) of the scrollbar with a background color and rounded corners.
Go to:
PREV : Focus Within.
NEXT : Fullscreen.
HTML-CSS Editor:
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.