css no scroll code example

Example 1: hide scrollbar css

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge add Firefox */
.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none; /* Firefox */
}

Example 2: remove scrollbar css

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.example {
  -ms-overflow-style: none;
}

Example 3: hide scrollbars

//Hides scrollbars but does not allow scrolling
body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

//Hides scrollbars but keep the ability to scroll
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Example 4: css no scroll

<!DOCTYPE html>
<html>
<head>
<style>
body {
  height: 5000px; /* Make this site really long */
  width: 5000px; /* Make this site really wide */
  overflow: hidden; /* Hide scrollbars */
}
</style>
</head>
<body>

<h2>Hide scrollbars</h2>
<p>This example will hide the scrollbars (and the functionality - it is not possible to scroll inside the page).</p>
<p>Try to remove <strong>overflow: hidden;</strong> to see the effect.</p>

</body>
</html>

Example 5: css stop scrollbar

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

Example 6: hide scrollbar html css

/* On Chrome */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
/* For Firefox and IE */
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

Tags:

Javascript Example

Recent Posts