In this case I have the following situation:
body{
margin: 0px;
padding 0px;
overflow-y: auto;
}
.box{
position: absolute;
width: calc(100% - 260px);
height: 100%;
display: inline-table;
}
.caixa_responsiva{
position: relative;
width: 100%;
border: 10px solid transparent;
padding-bottom: 54.9%; /*O problema*/
overflow: hidden;
float: left;
}
.caixa_responsiva video{
position: absolute;
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.comentarios{
float: left;
width: 100%;
display: inline-table;
}
.comentarios{
display: inline-block
}<div class="box">
<div class="caixa_responsiva">
<video controls></video>
</div>
<div class="comentarios">
<p>Comentario...</p>
<p>Comentario...</p>
<p>Comentario...</p>
<p>Comentario...</p>
<p>...</p>
</div>
</div> My problem is that I want to add a class to the body tag when the div box_responsive exits the field view, I could try picking the scroll with JavaScript but would not know the div size to compare with the value of the scroll because of the responsiveness of the% size of% done with div and also with the probability of adding or removing comments.