CODEWITHSUNDEEP
javascriptjqueryhtmlcss
J. Daykin
J. Daykin

Reputation: 45

Is it possible to hide overflow but still allow scrolling?

Probably a very stupid question, but I added overflow:hidden to my body to remove white space that appears beneath it but this disables scrolling, I realize the issue is probably elsewhere and this isn't the fix, but am wondering if it's possible to hide overflow but enable scrolling?

Upvotes: 1

Views: 205

Answers (4)

Shady Alset
Shady Alset

Reputation: 5714

If you want to do it with webkit you can do it like this:

#container {
  overflow: scroll;
  overflow-x: hidden;
  height:65px;
  width:350px
}
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim
quis. Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nunc
leo a libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas. Vestibulum turpis neque,
condimentum a tincidunt quis, molestie vel justo. Sed
molestie nunc dapibus arcu feugiat, ut sollicitudin metus
sagittis. Aliquam a volutpat sem. Quisque id magna
ultrices, lobortis dui eget, pretium libero. Curabitur
aliquam in ante eu ultricies.
</div>

Upvotes: 1

Mukesh Ram
Mukesh Ram

Reputation: 6338

Try This:

<div class="parent">
  <div class="child">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Integer vehicula quam nibh, eu tristique tellus dignissim quis.
     Integer condimentum ultrices elit ut mattis.
     Praesent rhoncus tortor metus, nec pellentesque enim 
     mattis nec. Nulla vitae turpis ut dui consectetur 
     pellentesque quis vel est. Curabitur rutrum, mauris ut
     mollis lobortis, sem est congue lectus, ut sodales nuncleo a 
     libero. Cras quis sapien in mi fringilla tempus 
     condimentum quis velit. Aliquam id aliquam arcu. Morbi
     tristique aliquam rutrum. Duis tincidunt, orci suscipit 
     cursus molestie, purus nisi pharetra dui, tempor
     dignissim felis turpis in mi. Vivamus ullamcorper arcu
     sit amet mauris egestas egestas.
  </div>
</div>

CSS

.parent{
  position: relative;
  width: 300px;
  height: 150px;
  border: 1px solid black;
  overflow: hidden;
}
.child{
  height: 150px;
  width: 312px;
  padding-right:15px;/* change as per your browser scroll*/
  overflow-y: scroll;
}

Upvotes: 0

Kirankumar Dafda
Kirankumar Dafda

Reputation: 2384

element{ overflow: scroll; }

This will remove white space and if content is overflow generate scroll automatically.

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

Try

#elem { overflow:auto }

this will enable scrolling when the conatining content is bigger that the parent

Upvotes: 3

Related Questions