Scroll css

Custom scrollbar

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Overflow css

/* To solve overflow issue in IE,
always use properties separately,
do not use short hand */

div {
  overflow-x: hidden;
  overflow-y: auto;
}

Smooth scroll css

html {
  scroll-behavior: smooth;
}

/* No support in IE, or Safari
You can use this JS polyfill for those */
http://iamdustan.com/smoothscroll/

Coustomize srollbar

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Source: css-tricks.com

Scroll css

<div style="overflow: scroll;">
	<?php echo $this->element('menu/left_sidebar'); ?>
</div>

// overflow: scroll;

Similar codes

0 vote224 views1 answer
Css column gap flex
CSS
0 vote210 views1 answer
Focus in styled component
CSS
1 vote235 views2 answers
Woocommerce shopping cart icon size
CSS
0 vote210 views2 answers
Add transition to zoom button on hover
CSS
0 vote238 views1 answer
Change size material checkbox
CSS
1 vote209 views1 answer
How to remove increment in input type number
CSS
75 votes203 views6 answers
Flexbox
CSS
17 votes204 views1 answer
Artillery annot be loaded because running scripts is disabled on this system
CSS
0 vote195 views3 answers
Image not rendering in tailwind css
CSS
13 votes228 views2 answers
Box-sizing
CSS