How to set Height of the DIV Son, through the depth of the Scroll of the Father DIV

Question

How to set Height of the DIV Son, through the depth of the Scroll of the Father DIV

Navigation

#1 by (2 votes)

0

I'm having a bit of trouble applying the depth size of the% dynamic% of the first scroll to the second div overlapped.

Code:

// Vamos criar a segunda Div, no qual ficará sobreposta a primeira Div
var sobrepor = document.createElement('div');
sobrepor.setAttribute('id', 'escala');
sobrepor.setAttribute('height', 'tam' + 'px');
document.getElementById('teste').appendChild(sobrepor);

/* Agora temos de capturar a profundidade do Scroll 
da primeira Div para setar na segunda Div e pronto! */

var obj = document.getElementById('teste');
var tam = obj.scrollHeight;
obj.scrollTop = tam;

/* Para nós termos uma idéia real, vamos nos utilizar 
do resultado de profundidade do Scroll da Div principal */

alert(tam);

#escala {
    position : absolute;
    top : 0; 
    left : 0;
    width : 50%;
    margin: 0 25% auto;
    background : steelblue; 
    z-Index : 1; 
    opacity : 0.1;
}

#teste {
    position : relative;
    width : 400px; 
    height : 200px; 
    margin : 0 auto;
    border : thin solid green; 
    overflow : auto; 
}

#profundidade {
    height : 800px;
}

<div id='teste'>
    <p id='profundidade'></p>
</div>

I've been wandering a method by myself to reach the goal, but I decided to share this problem with a new post .

javascript css div rolamento dinamico

asked by anonymous 05.04.2017 / 21:17

1 answer

PHP: How to catch exception thrown by the model in the controller Clear value of an id with jquery

score 2 · Accepted Answer

Solved! - variable tam within style.height

// Vamos criar a segunda Div, no qual ficará sobreposta a primeira Div
var sobrepor = document.createElement('div');
sobrepor.setAttribute('id', 'escala');
document.getElementById('teste').appendChild(sobrepor);

// Agora temos de capturar a profundidade do Scroll da primeira Div
// Para aplicarmos, a mesma profundidade dinâmica na segunda Div
var obj = document.getElementById('teste');
var tam = obj.scrollHeight;
obj.scrollTop = tam;
document.getElementById('escala').style.height = tam + 'px';

#escala {
    position : absolute;
    top : 0; 
    left : 0;
    width : 50%;
    margin: 0 25% auto;
    background : steelblue; 
    z-Index : 1; 
    opacity : 0.1;
}

#teste {
    position : relative;
    width : 400px; 
    height : 200px; 
    margin : 0 auto;
    border : thin solid green; 
    overflow : auto; 
}

#profundidade {
    height : 800px;
}

<div id='teste'>
    <p id='profundidade'></p>
</div>

Solution

document.getElementById('escala').style.height = tam + 'px';