CSS scroll no body

Asked

Viewed 2,861 times

1

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

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

Does anyone know how to remove the scroll of body and stick with the scroll of content?

html css bootstrap rolling

  • You can print out this situation or a piece of code to try to understand what you need?

  • Sabrina, edit the question and put code please, it’s easier to solve.

  • Vote today! Vote tomorrow! Vote forever! Vote consciously! Your vote is very important to our community, contribute to us, and help make Stack Overflow in Portuguese (Sopt) bigger and bigger. You can learn more at: Vote early, vote often

1 answer

1


From what I understand you can make use of the overflow, thus:

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

The code above will hide the scroll horizontal and vertical.

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

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

If you want to hide only the scrollhorizontal, use overflow-x:

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

Note the use of overflow in the snippet down 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>

One can also make use of the ::-Webkit-scrollbar, see an example in Fiddle.

  • Thank you very much !

Browser other questions tagged html css bootstrap rolling

You are not signed in. Login or sign up in order to post.