hgow to hide scroll bar and add buttons in javascript code example
Example 1: remove scrollbar css
.example::-webkit-scrollbar {
display: none;
}
.example {
-ms-overflow-style: none;
}
Example 2: css stop scrollbar
html {
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar {
width: 0px;
}
Example 3: hgow to hide scroll bar and add buttons in javascript
.scoll-pane {
width: 100%;
height: auto;
overflow: auto;
outline: none;
overflow-y: hidden;
padding-bottom: 15px;
-ms-overflow-style: scroll;
scrollbar-width: none;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
img {
width: 300px;
height: 180px;
}
.scoll-pane::-webkit-scrollbar {
display: none;
}
Example 4: 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);
}
Example 5: hgow to hide scroll bar and add buttons in javascript
<div class="container">
<div class="row">
<div class="col-12">
<div class="scoll-pane mt-4" id="container">
<ul class="photos">
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
<li>
<img src="https://robohash.org/test">
</li>
</ul>
</div>
</div>
</div>
</div>
<button id="slideBack" type="button">Prev</button>
<button id="slide" type="button">Next</button>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">