CSS scroll no body

Question

CSS scroll no body

Navigation

#1 by (1 votes)

1

I have a structure with 2 columns ( Bootstrap ), one being the menu, the other the content, with value set and some 3 images large within this content that generates a scroll.

However, I also have a scroll on body of the page, resulting in 2 scroll o body and content.

Does anyone know how to remove scroll from body and stay with scroll of content ?

html css rolamento bootstrap

asked by anonymous 20.06.2017 / 20:43

1 answer

Check an obj json option and return Passing by reference, and saving data from a file to a vector

score 1 · Answer 1

From what I understand you can make use of overflow , like this:

<style type="text/css">
    body {
        overflow:hidden;
    }
</style>

The above code will hide the% horizontal and vertical%.

If you want to hide only the scroll vertical, use scroll :

<style type="text/css">
    body {
        overflow-y:hidden;
    }
</style>

If you want to hide only the overflow-y horizontal, use scroll :

<style type="text/css">
    body {
        overflow-x:hidden;
    }
</style>

Note the use of overflow in% with% below:

.content {
  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  /*overflow: hidden;        /* SEM SCROLL */
  overflow-y: scroll;    /* COM SCROLL VERTICAL */
  /*overflow-x: scroll;    /* COM SCROLL HORIZONTAL */
}

.content::-webkit-scrollbar { 
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

You can also use :: - webkit-scrollbar , see an example on Fiddle .