Customise Scroll Bar with css

Developer
Tommy
Size
2,853 Kb
Views
54,648
  1. Customise Scroll Bar with css Previews
  2. Customise Scroll Bar with css HTML Codes
  3. Customise Scroll Bar with css CSS Codes
  4. Customise Scroll Bar with css JS Codes

How do I make an customise scroll bar with css?

What is a customise scroll bar with css? How do you make a customise scroll bar with css? This script and codes were developed by Tommy on 30 December 2022, Friday.

Customise Scroll Bar with css Previews
IQ Test

Customise Scroll Bar with css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Customise Scroll Bar with css</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Roboto);
html,
body { font-family: 'Roboto', sans-serif;
}
.sidebar { width: 200px; background: #ddd; overflow: auto;
}
.sidebar li { list-style-type: none; padding: 10px 0;
}
footer { text-align: center;
}
.height { max-height: 200px;
}
::-webkit-scrollbar { width: 16px; background-color: #cccccc;
}
::-webkit-scrollbar-thumb { background-color: #B03C3F; border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background-color: #bb4043;
}
::-webkit-scrollbar-thumb:active { background-color: #9d3638;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="sidebar"> <ul> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> <li>Happy!</li> </ul> </div>
</div>
<footer>FOOTER</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Customise Scroll Bar with css - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto);
html,
body { font-family: 'Roboto', sans-serif;
}
.sidebar { width: 200px; background: #ddd; overflow: auto;
}
.sidebar li { list-style-type: none; padding: 10px 0;
}
footer { text-align: center;
}
.height { max-height: 200px;
}
::-webkit-scrollbar { width: 16px; background-color: #cccccc;
}
::-webkit-scrollbar-thumb { background-color: #B03C3F; border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background-color: #bb4043;
}
::-webkit-scrollbar-thumb:active { background-color: #9d3638;
}

Customise Scroll Bar with css - Script Codes JS Codes

$(function(){ var screenHeight = $(window).height(); $(".sidebar").css("height",screenHeight);
});
$("a").click(function(){ $(".sidebar").toggleClass("height");
});
$(window).scroll(function(){ var scroll = $(window).scrollTop(); console.log(scroll);
});
Customise Scroll Bar with css - Script Codes
Customise Scroll Bar with css - Script Codes
Home Page Home
Developer Tommy
Username hoehoe
Uploaded December 30, 2022
Rating 3
Size 2,853 Kb
Views 54,648
Do you need developer help for Customise Scroll Bar with css?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tommy (hoehoe) Script Codes
Name
Custom checbox with css
Flex box
Timeline with CSS
Web SQL
CSS Sub-orderd list
Parallax with only css
Materialize css
Vue with axios sample
CSS animation
Adding FontAwsome icon via CSS pseudo vs fa class
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!