overflow hide scrollbar code example
Example 1: hide scrollbar css
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
.scrollbar-hidden {
-ms-overflow-style: none;
scrollbar-width: none;
}
Example 2: remove scrollbar css
.example::-webkit-scrollbar {
display: none;
}
.example {
-ms-overflow-style: none;
}
Example 3: hide scrollbar html css
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
Example 4: css hide scrollbar
// Sass Mixing
@mixin hideScrollbar {
&::-webkit-scrollbar {
width: 0 !important
}
-ms-overflow-style: none;
scrollbar-width: none;
}
Example 5: hgow to hide scroll bar and add buttons in javascript
var button = document.getElementById('slide');
button.onclick = function () {
var container = document.getElementById('container');
sideScroll(container,'right',25,100,10);
};
var back = document.getElementById('slideBack');
back.onclick = function () {
var container = document.getElementById('container');
sideScroll(container,'left',25,100,10);
};
function sideScroll(element,direction,speed,distance,step){
scrollAmount = 0;
var slideTimer = setInterval(function(){
if(direction == 'left'){
element.scrollLeft -= step;
} else {
element.scrollLeft += step;
}
scrollAmount += step;
if(scrollAmount >= distance){
window.clearInterval(slideTimer);
}
}, speed);
}