css hide scrollbar when not needed

Add Answer

SubZero answered on July 1, 2020 Popularity 9/10 Helpfulness 6/10

answer css hide scrollbar when not needed

related hide scrollbar css

related hide scrollbar but still scroll

related how to hide scrollbar css

related hide scrollbar css

related how to hide scrollbar overflow

related Hide scroll bar, but while still being able to scroll

related hide scrollbar css

related css hide scrollbar when not needed

css hide scrollbar when not needed

Comment

/* Hide scrollbar when not needed */
.container {
  overflow: auto;
}

.container::-webkit-scrollbar {
  display: none;
}

This code sets the overflow property of the .container element to auto, which will display the scrollbar only when the content inside the container exceeds its height. When the scrollbar is not needed, the ::-webkit-scrollbar pseudo-element is set to display: none, which hides the scrollbar. Note that this only works in WebKit-based browsers such as Chrome and Safari.

Popularity 9/10 Helpfulness 6/10 Language css

Source: Grepper

Tags: css hide scrollbar when

Link to this answer
Share Copy Link

Contributed on Mar 07 2023

SubZero

0 Answers Avg Quality 2/10

Closely Related Answers

hide scrollbar css

Comment

/* 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 */
}

Popularity 10/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 01 2020

Adarsh077

0 Answers Avg Quality 2/10

hide scrollbar but still scroll

Comment

.class {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.class::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Popularity 10/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Feb 27 2022

Yeti Wallhack

0 Answers Avg Quality 2/10

how to hide scrollbar css

Comment

/* hide scrollbar but allow scrolling */
body {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
/* Kindly upvote this answer if it helped you. */

Popularity 10/10 Helpfulness 10/10 Language css

Source: blog.hubspot.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 22 2022

Energetic Emu

0 Answers Avg Quality 2/10

hide scrollbar css

Comment

/* A very quick an applicable solution is to use this piece of code: */
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}

Popularity 10/10 Helpfulness 8/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Feb 18 2021

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

hide scrollbar css

Comment

/* hide scrollbar but allow scrolling */
element {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

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

Popularity 10/10 Helpfulness 8/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Apr 16 2022

Combative Constrictor

0 Answers Avg Quality 2/10

how to hide scrollbar overflow

Comment

-1

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}

Popularity 10/10 Helpfulness 8/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Aug 14 2021

Graceful Grouse

0 Answers Avg Quality 2/10

Hide scroll bar, but while still being able to scroll

Comment

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Popularity 9/10 Helpfulness 7/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link

Contributed on May 03 2022

Lucila Chiarvetto Peralta

0 Answers Avg Quality 2/10

hide scrollbar css

Comment

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

Popularity 10/10 Helpfulness 7/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 25 2021

Smiling Salamander

0 Answers Avg Quality 2/10

hide scrollbar css

Comment

/*cleanest solution*/
.element::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

Popularity 9/10 Helpfulness 7/10 Language css

Source: Grepper

Tags: css hide h

Link to this answer
Share Copy Link

Contributed on Nov 09 2023

Olle

0 Answers Avg Quality 2/10

css hide scrollbar when not needed

Comment

If you want to hide the scrollbar in other browsers, you can use the scrollbar-width property with a value of none, like this:

/* Hide scrollbar in other browsers */
.container {
  overflow: auto;
  scrollbar-width: none;
}

/* Hide scrollbar in Chrome and Safari */
.container::-webkit-scrollbar {
  display: none;
}

Popularity 9/10 Helpfulness 6/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 07 2023

SubZero

0 Answers Avg Quality 2/10

css hide scrollbar when not needed

Contents

More Related Answers

css hide scrollbar when not needed

Closely Related Answers

hide scrollbar css

hide scrollbar but still scroll

how to hide scrollbar css

hide scrollbar css

hide scrollbar css

how to hide scrollbar overflow

Hide scroll bar, but while still being able to scroll

hide scrollbar css

hide scrollbar css

css hide scrollbar when not needed

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.