I would like to find a way to hide the scroll bar in the browser.
I have tried the following:
<style type="text/css">
body {
overflow:hidden;
}
</style>
But setting overflow:hidden in the body , what happens is that apart from disappearing, the functionality of Scroll is disabled and I need it to continue working.
For what I get to understand from ESTA answer in SO, using a container with the property overflow hidden and playing with margin and padding of an internal div, you can get to hide the scroll bar.
There's even a Fiddle where it works.
The structure used to obtain the effect is as follows:
HTML
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>
CSS
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max width of all the scroll bars across
* the devices you are targeting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
I hope it helps you.
Slds!
To remove the vertical scroll put this code in your file style.css You will not need JavaScript. Try it:
html,body{
overflow-x: hidden;
color:black;
font-family:'Opens Sans',helvetica;
height:100%;
width:101%;
margin: 0px;
padding: 0px;
}