0

Estou tendo um pouco de dificuldade em aplicar o tamanho da profundidade do scroll vertical dinâmico da primeira div, na segunda div sobreposta.

Código:

// 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> 

Venho perambulando sozinho um método para alcançar o objetivo, mas decidi por partilhar este problema fazendo um novo post.

0

1 Resposta 1

2

Resolvido!!! - variável tam dentro de 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> 

Solução

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .