Hidden scrollbar in all browsers
How do I make an hidden scrollbar in all browsers?
It actually took me a while to find this. And when I found this method, it still didn't work in webkit. So this pen is code from http://www.simplyeasy.cz/blog/demo/scrollable-textarea-without-scrollbar/div.html PLUS an extra css measure to hide in webkit. I also updated the js to use jQuery. What is a hidden scrollbar in all browsers? How do you make a hidden scrollbar in all browsers? This script and codes were developed by Brett Clanton on 15 August 2022, Monday.
Hidden scrollbar in all browsers - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hidden scrollbar in all browsers</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>No Scroll Bars, Yay!</h1>
<div id="wrapper"> <div id="textarea"> <h3>-top-</h3> <p><em>Try scrolling...</em></p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <h3>-bottom-</h3> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Hidden scrollbar in all browsers - Script Codes CSS Codes
body { font-family: sans-serif;
}
h1 { text-align: center;
}
#textarea::-webkit-scrollbar { display: none;
}
#textarea { border: none; overflow: auto; height: 120px; width: 335px; padding: 20px;
}
#wrapper { border: 1px solid #CCCCCC; overflow: hidden; width: 335px; height: 120px; margin: 20px auto;
}Hidden scrollbar in all browsers - Script Codes JS Codes
$('#wrapper').css({ width: $("#textarea")[0].scrollWidth });
| Developer | Brett Clanton |
| Username | brettclanton001 |
| Uploaded | August 15, 2022 |
| Rating | 3 |
| Size | 2,329 Kb |
| Views | 40,480 |
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!
| Name | Size |
| Staging Embed Widget | 2,642 Kb |
| Space Sun Design - All CSS | 6,391 Kb |
| Mincraft cube experiment ALL CSS | 8,956 Kb |
| Fun with columns | 2,880 Kb |
| Left Align | 1,435 Kb |
| Percent Clock | 8,570 Kb |
| Cool flat-yet-3d - ALL CSS | 2,697 Kb |
| A Pen by Brett Clanton | 2,791 Kb |
| How To Compile Ruby in CSS | 5,089 Kb |
| Compass Icon - ALL CSS | 3,654 Kb |
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!
| Name | Username | Size |
| Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
| Table Exercise | Fresco | 9,585 Kb |
| Realistic Buttons | Stoypenny | 2,248 Kb |
| Lunar eclipse | Ademilter | 2,056 Kb |
| Random Gradients - JS | Aldlevine | 2,026 Kb |
| Html5-canvas-snow-effect | MariamMassadeh | 2,609 Kb |
| LBCA - Mail canvas | Emnbdx | 3,856 Kb |
| Shop Talk logo made in CSS | Hugo | 19,368 Kb |
| Responsive Boxes without Images | Andymcfee | 4,120 Kb |
| E-mail Template | SoloMDFK | 4,871 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!