HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

CSS Style Scrollbar


CSS Tutorial » CSS Style Scrollbar

With webkit browsers, we can use this pseudo elements to customize the browser's scrollbar:
  • ::-webkit-scrollbar: the scrollbar.
  • ::-webkit-scrollbar-button: the buttons on scrollbar.
  • ::-webkit-scrollbar-track: the track of the scrollbar.
  • ::-webkit-scrollbar-thumb: the draggable scrolling handle.
  • ::-webkit-scrollbar-corner: horizontal and vertical scrollbars meet - bottom corner of the scrollbar
  • ::-webkit-scrollbar-track-piece: the track NOT covered by the handle.
  • ::-webkit-resizer: the draggable resizing handle that appears at the bottom corner of some elements.

We can add Style text as:
Internal - by using a <style> element in the <head> section
External & External - by using an external CSS file as style.css

Note: Scrollbars - not supported in Firefox and IE/Edge.


How to create Style Custom Scrollbar - examples


Webkit browsers, Chrome, opera and Safari, supports non-standard ::-webkit-scrollbar You can try to execute the following code to change Custom Scrollbar on this page.

Example:
Example 1, How to create Style Custom Scrollbar - examples:

  <!DOCTYPE html>
<html>
<head>
<title>create Style Custom Scrollbar - examples - example</title>
<style>
/* width */
::-webkit-scrollbar {
width: 16px;
}

/* Track */
::-webkit-scrollbar-track{
background: #66FF99;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #007927;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #003C13;
}
</style>
</head>
<body>
<h1>CSS create Style Custom Scrollbar</h1>
<p><strong>Note:</strong> -webkit-scrollbar is not supported for Firefox and IE/Edge.</p>
<?php
echo str_repeat("Hello America! here is my text what I need for this page.
here we add the text that corresponds to the title and pages
we want to build.
Using Custom CSS Scrollbar we can add more windows on the same page
and each with more content on the screen.
<br />",14);
?>
</body>
</html>
Note: Use external CSS instead.


How to create CSS scrollbar with box shadow: - examples


You can try to execute the following code to change CSS scrollbar with box shadow on this page.

Example:
Example 1, How to create CSS style text size, color and bold - examples:

  <!DOCTYPE html>
<html>
<head>
<title>create Style Custom Scrollbar - examples - example</title>
<style>
/* width */
::-webkit-scrollbar {
width: 24px;
}

/* Track */
::-webkit-scrollbar-track{
box-shadow: inset 0 0 6px navy;
border-radius: 12px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: blue;
border-radius: 12px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #33CCFF;
}
</style>
</head>
<body>
<h1>CSS create Style Custom Scrollbar</h1>
<p><strong>Note:</strong> -webkit-scrollbar is not supported for Firefox and IE/Edge.</p>
<?php
echo str_repeat("Hello America! here is my text what I need for this page.
here we add the text that corresponds to the title and pages
we want to build.
Using Custom CSS Scrollbar we can add more windows on the same page
and each with more content on the screen.
<br />",14);
?>
</body>
</html>
Note: Use external CSS instead.

css style scrollbar, in div, firefox, cross browser, horizontal, ie, edge, button, overflow CSS Style Scrollbar - css tutorial

3187. CSS Padding, top, bottom, left, right, css tutorial
CSS Padding, top, bottom, left, right css tutorial
https://www.agernic.com/css-tutorial/css-padding-top-bottom-left-right.html

667. CSS tutorials - w3resource

https://www.w3resource.com/css/CSS-tutorials.php

811. CSS border-top-style property - CSS tutorials - w3resource

https://www.w3resource.com/css/border/CSS-border-top-style-property.php

3179. CSS align content Property - CSS align text - how to create, css tutorial
CSS align content Property - CSS align text - how to create css tutorial
https://www.agernic.com/css-tutorial/css-align-content-property-css-align-text-how-to-create.html

2226. CSS Tutorial - Build a navigation bar
Normally to create a navigation bar (horizontal or vertical menu) the HTML lists are a good start point. You can then use CSS to give it some awesomeness. You will also use a link inside the li element. So let
https://tutorialehtml.com/en/css-tutorial-build-a-navigation-bar/

2708. Selectors - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/cssselectors.htm

Your add here
PHP strtolower() function

PHP lcfirst() function

PHP md5() function

PHP printf() function

PHP print() function

PHP strlen() function

PHP substr() function

PHP ucwords() function

PHP htmlentities() function

PHP isset() Function

PHP similar_text() function

PHP strcmp() function

PHP htmlspecialchars() function

PHP strrchr() Function

PHP str_split() function

PHP wordwrap() function

HTML Headings, examples
HTML button link - How to create a button style in HTML
Travel & Turism
HTML Image Align
CSS Style Scrollbar Horizontal
Easy Learning with "Show PHP", example of a simple php script.