Resize the windows and get a stylish scroll bar for the menu

user_14430938 0
Viewed 125

what parameters do i have to add in my NavBar.css (i.e menu in left side) if I want to see a scroll bar (in transparent white) appearing when i resize my windows (i.e I can scroll down or up if the window is not at the max so I can still scroll the menu and see the other icons) please ?

.NavBar{
  width: 15rem;
  height: 100vh;
  background-color: #FF7F50 ;
  flex-direction: colums;
  gap: 1.25rem

}

This is what i want to have not in green but in transparent/grey bar .

enter image description here

react-hooks reactjs css dom javascript
1 Answers

Scroll the body:

html {
  overflow: hidden;
  /* Stop the body expanding */
}

body {
  margin: 0;
  height: 100vh;
  /* Tells the element to scroll instead of the default of visbily overflowing */
  overflow-y: auto;
  /* Scrollbar and scrollbar gutter colors */
  scrollbar-color: #888 transparent;
}

nav {
  width: 15rem;
  height: 110vh;
  background-color: #FF7F50;
  /* gap and flex-direction will do nothing as this element uses flow layout (flex hasn't been declared) */
  flex-direction: colums;
  /* Even then, colums has a typo */
  gap: 1.25rem;
}
<nav>
  test
</nav>

Scroll the nav:

body {
  margin: 0;
}

nav {
  width: 15rem;
  height: 100vh;
  overflow-y: auto;
  /* Tells the element to scroll instead of the default of visbily overflowing */
  background-color: #FF7F50;
  scrollbar-color: white transparent;
  /* Scrollbar and scrollbar gutter colors */
}

nav>h1 {
  margin-top: 100vh;
}
<nav>
  <h1>Pineapple is good on pizza</h1>
</nav>

user_141905430
Related