CODEWITHSUNDEEP
css
user3100859
user3100859

Reputation:

Overflow scroll on div

So I'm not really sure how explain this, but I'll try to. I have a comments page. The post is a the top, and comment field below. In the middle of both of those are the comments. Now here's the issue, after a few comments, the user ends up having to scroll down quite a bit just to see the form. What I want to do is display 4 comments, then when the user scrolls down, they'll see more. Only when they scroll on the comments. So its like overflow: scroll, but on divs. Here's more info to visualize it

enter image description here

If the user scrolls on any of the comments, it'll scroll as if it were overflow: scroll and show more comments. So its like a page, inside a page. I'm not really sure how to do this, as I haven't seen any posts on it, or know what to search for. Any help would be great.

Upvotes: 3

Views: 171

Answers (2)

Kisspa
Kisspa

Reputation: 584

Test view 

.scroll-wrap{
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid rgb(204, 204, 204);
   border-radius: 15px 15px 15px 15px;
   font: normal normal normal 16px/normal Times;
   margin: 20px 24px 0px;
   border:1px solid green;
   position:relative;
   width: 750px;
   height: 606px;
  overflow:hidden;
 }

http://jsfiddle.net/kisspa/ThyYM/

Upvotes: 0

link
link

Reputation: 2510

What about when hovering over the entire comments section change the css to

overflow: scroll;

but when outside the section, change it back to:

overflow: hide;

So that way when outside there is no scrolling, but inside you have the ability to scroll.

Of course you would have to decide on the right height to limit the size of the comments.

Fiddle: http://jsfiddle.net/rcsvM/15/

Hope this helps.

Upvotes: 2

Related Questions