Unable to scroll after play button is clicked

HTML & CSS
1

Code: https://jsfiddle.net/ckgfn5oL/1/

.container1 {
  position: relative;
  overflow: hidden;
  /*width: 100%;
  height:100%; */
}

Unable to scroll after button is clicked.

Here: How do I fix this?

On This one:
code: https://jsfiddle.net/ckgfn5oL/5/

.container1 {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

I’m going to be replacing the hover with javascript, but this would need to be fixed first.

Right now I’m just trying to get the scrolling thing fixed.

Not really sure what is causing it, for the page not being able to be scrolled after the button is clicked.

2

The overflow:hidden is what stops the page being scrolled.

Why do you need it? What is its purpose.

Also if the page is only height:100% then theoretically there is nothing to scroll as its height will be limited to the viewport height. You can’t have it both ways.

3

What do you mean you can have it both ways?

Referring to what?

I remove overflow hidden, would I do something else also?

You don’t mean, remove height from this also, do you?

.container1 {
  position: relative;
  /*overflow: hidden; */
  width: 100%;
  height: 100%;
}
4

Can’t have it both ways.

If something has been made viewport height (effectively 100% height in your use case) then what happens when the content is taller than the viewport (such as when you reveal your item). ?

The portion outside of the viewport is basically ignored and background will not follow around the element. If you say something is xx tall then you can’t put something bigger inside it.

5

I read it wrong, you said can, not can’t.

100% needs to be on there, without it, the play svg floats to the top of the screen.

6

That has been addressed in your other thread.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.