how to hide scrollbar in javascript code example
Example 1: javascript hide scrollbar
// You can hide the document scrollbar with this...
document.body.style.overflow = 'hidden';
//...and unhide it with this:
document.body.style.overflow = 'visible';
// Or switch between them:
booleanCondition
? document.body.style.overflow = 'hidden'
: document.body.style.overflow = 'visible';
Example 2: 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">
Example 3: javascript hide scrollbar
function HideScrollbar() {
var style = document.createElement("style");
style.innerHTML = `body::-webkit-scrollbar {display: none;}`;
document.head.appendChild(style);
}