1/* Hide scrollbar for Chrome, Safari and Opera */
2.scrollbar-hidden::-webkit-scrollbar {
3 display: none;
4}
5
6/* Hide scrollbar for IE, Edge add Firefox */
7.scrollbar-hidden {
8 -ms-overflow-style: none;
9 scrollbar-width: none; /* Firefox */
10}
1/* Hide scrollbar for Chrome, Safari and Opera */
2.example::-webkit-scrollbar {
3 display: none;
4}
5
6/* Hide scrollbar for IE and Edge */
7.example {
8 -ms-overflow-style: none;
9}
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5body {
6 height: 5000px; /* Make this site really long */
7 width: 5000px; /* Make this site really wide */
8 overflow: hidden; /* Hide scrollbars */
9}
10</style>
11</head>
12<body>
13
14<h2>Hide scrollbars</h2>
15<p>This example will hide the scrollbars (and the functionality - it is not possible to scroll inside the page).</p>
16<p>Try to remove <strong>overflow: hidden;</strong> to see the effect.</p>
17
18</body>
19</html>
20
1html {
2 scrollbar-width: none; /* For Firefox */
3 -ms-overflow-style: none; /* For Internet Explorer and Edge */
4}
5
6html::-webkit-scrollbar {
7 width: 0px; /* For Chrome, Safari, and Opera */
8}
1div.ex1 {
2 overflow: scroll;
3}
4
5div.ex2 {
6 overflow: hidden;
7}
8
9div.ex3 {
10 overflow: auto;
11}
12
13div.ex4 {
14 overflow: visible;
15}
1/* To solve overflow issue in IE,
2always use properties separately,
3do not use short hand */
4
5div {
6 overflow-x: hidden;
7 overflow-y: auto;
8}