I did this, what it basically does is hide the scroll, is there another way to do it?
div {
overflow: hidden;
width: 188px;
}
.barra {
height: 80px;
overflow: auto;
width: 208px;
border: 1px solid gray;
}<div>
<div class="barra">
hola mundo <br/>
hola como estas <br/>
hola america <br/>
<br/>
<br/>
hola america <br/>
<br/>
</div>
</div>Only what you have is not enough. You are setting a value of 20 pixels for the scroll, but you are not placing restrictions on the text on the left, which can cause in some cases the text to be cut and not look good.
For example, the text is cut at least in Chrome 57:
div {
overflow: hidden;
width: 188px;
}
.barra {
height: 80px;
overflow: auto;
width: 208px;
border: 1px solid gray;
}<div>
<div class="barra">
A veces se corta el texto y sto podría ser un problemilla que no quieres tener.<br/>
<br/>
Hola<br/>
Mundo<br/>
Adiós<br/>
Mundo<br/>
</div>
</div>I would recommend that you make some changes to your code to avoid this and make it look better:
padding-right to the child of the same size as the hidden box (in this case 208-188 = 20px). padding of the child count as part of the width (using box-sizing:border-box ). overflow-y:scroll ). With those changes, the code would look like this:
div {
overflow: hidden;
width: 188px;
border: 1px solid gray;
}
.barra {
height: 80px;
overflow:auto;
width: 208px;
border:0;
padding-right:20px;
box-sizing:border-box;
}<div>
<div class="barra">
A veces se corta el texto y sto podría ser un problemilla que no quieres tener.<br/>
<br/>
Hola<br/>
Mundo<br/>
Adiós<br/>
Mundo<br/>
</div>
</div>You could try something like this:
.contenedor {
overflow:hidden;
width:188px;
}
.barra {
width:208px;
height:80px;
overflow:auto;
padding-right: 20px;
border: 1px solid gray;
}<div class="contenedor">
<div class="barra">
hola mundo <br/>
hola como estas <br/>
hola america <br/>
<br/>
<br/>
hola america <br/>
<br/>
</div>
</div> What I have done here is to remove the property that you applied in a general way to the <div> :
div {
overflow: hidden;
width: 188px;
}
And it is separated into two elements, you already had .barra , so I separated the other div , with the name, "container".
.contenedor {
overflow:hidden;
width:100%;
height:100%;
}
And later, the properties were applied to% co_of container%.
PS: I've done the tests in Chrome and Firefox. The scroll bar does not appear.
You can try to hide the bar with the container div, for that use the properties margin-right and padding-bottom :
.container {
width : 100%;
overflow : hidden;
height : 200px;
}
.scroll {
overflow : scroll;
max-height : 200px;
margin-right : -15px;
padding-bottom : 15px;
}<div class="container">
<div class="scroll">
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkjmbmnbmnbmnbmnbmnbmnbmnbmnbmnbmnbmnbmnbmnbmsadadasdsadsadsadsa<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
ñkjdlkdjldkj<br>
</div>
</div>If you have the option of using an additional library, I recommend using the following:
which hides the scrollbar and shows it only when hovering.
Using CSS you can hide the scrollbar in Webkit, Gecko and MS IE / Edge. I'm not sure about Edge, but I guess you can just as well with IE.
body {
background-color: turquoise;
height: 100vh;
padding: 25px;
}
div {
background-color: tomato;
height: 650px;
margin: 0 auto;
width: 50px;
}
::-webkit-scrollbar {
display: none;
}
html {
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
}<div></div>This method has some flaws, such as that in Firefox you can not scroll with the mousewheel (only with the navigation arrows). Another alternative is to do it using JavaScript.
const wrapper = document.querySelector('.wrapper');
(() => {
const offsetW = wrapper.offsetWidth;
const offsetH = wrapper.offsetHeight;
const clientW = wrapper.clientWidth;
const clientH = wrapper.clientHeight;
const scrollW = offsetW - clientW;
const scrollH = offsetH - clientH;
const docW = document.documentElement.offsetWidth;
const docH = document.documentElement.offsetHeight;
const {
top, right,
left, bottom
} = wrapper.getBoundingClientRect();
const hasScroll = {
horiz: scrollH > 0,
vert: scrollW > 0,
};
const createHider = orientation => {
const hider = document.createElement('div');
hider.classList.add('hider');
if (orientation === 'horizontal') {
hider.style.height = scrollH + 'px';
hider.style.width = clientW + 'px';
hider.style.bottom = (docH - (bottom + top)) + 'px';
hider.style.left = left + 'px';
}
if (orientation === 'vertical') {
hider.style.top = top + 'px';
hider.style.right = (docW - right) + 'px';
hider.style.height = clientH + 'px';
hider.style.width = scrollW + 'px';
}
return hider;
};
if (hasScroll.horiz) {
wrapper.appendChild(createHider('horizontal'));
}
if (hasScroll.vert) {
wrapper.appendChild(createHider('vertical'));
}
})();*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: turquoise;
overflow: hidden;
height: 100vh;
}
.wrapper {
background-color: #fff;
height: 80vh;
margin: 20px auto;
overflow: auto;
padding: 25px;
width: 80%;
}
.child {
background-color: tomato;
height: 450px;
margin: 0 auto;
width: 550px;
}
.hider {
background-color: #fff;
position: fixed;
z-index: 5;
}<div class="wrapper">
<div class="child"></div>
</div> The second approach is also used to create custom scrollbars that are cross-browser, since doing it by ::-webkit-scrollbar you do not get supports for other browsers that are not based on webkit / blink.