Por que o evento de posicionamento da janela não funciona?
quero executar o evento window onscroll, mas não sei por que não funciona em todos os navegadores(firefox, chrome, etc), e não ocorreram erros.
Código completo:
var elem = document.getElementById('repeat');
var show = document.getElementById('show');
for (i = 1; i <= 300; i++) {
elem.innerHTML += i + "<br/>";
}
window.onscroll = function () {
show.innerHTML = document.body.scrollTop;
};#show {
display:block;
position:fixed;
top:0px;
left:300px;
}<pre id="repeat"></pre>
<div style="position:relative;">
<div id="show">x</div>
</div>também jsfiddle: http://jsfiddle.net/sqo0140j
Qual é o problema ?
4 answers
X mudou para 0 e permanece como está.
A única maneira no seu código que pode acontecer é se o bloco de funções onscroll fizer uma alteração porque o seu HTML define X.
Se o seu window.onscroll = function() está mesmo a disparar, mas não está a obter a posição correcta (ou seja, 0), tente mudar a forma como a posição do pergaminho é devolvida:
window.onscroll = function () {
show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};
document.documentElement.scrollTop devolve sempre 0 no cromado. Isto porque o WebKit usa body para controlar a rolagem, mas usar o Firefox e IE html.
Por favor, tente o seu excerto actualizado:
var elem = document.getElementById('repeat');
var show = document.getElementById('show');
for (i = 1; i <= 300; i++) {
elem.innerHTML += i + "<br/>";
}
window.onscroll = function () {
show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};#show {
display:block;
position:fixed;
top:0px;
left:300px;
}<pre id="repeat"></pre>
<div style="position:relative;">
<div id="show">x</div>
</div>window.onscroll = function () {
console.log(document.documentElement.scrollTop || document.body.scrollTop);
};
Este código não funcionou mesmo depois de remover margin:0; e padding:0;.
Mas mencionando o addEventListener no documento.corpo é trabalhado
document.body.addEventListener('scroll',()=>{
console.log(document.documentElement.scrollTop || document.body.scrollTop);
})
Para mim, a Declaração {[[2]} funciona bem no cromo e na ópera, mas no Firefox volta 0.
A declaração funciona bem no Firefox, mas não no cromo e na Ópera...Talvez document.body.scrollTop; não seja bem suportado por FF
Soluções Possíveis:
Eu tentei.Math.max(document.body.scrollTop, document.documentElement.scrollTop);
E
document.body.scrollTop || document.documentElement.scrollTop;
Tenho um datacontainer que tinha a sua própria barra de pergaminhos que se sobrepõe à barra de pergaminhos incorporada na janela. Eu não notei isso até que eu comecei a dar uma olhada mais completa nos elementos na página usando o desenvolvedor chrome. A minha etiqueta exterior era assim.
Isto fez com que duas barras aparecessem à esquerda. Isto foi porque a propriedade, overflow: auto, estava dizendo ao contêiner de dados para fazer outra barra de posicionamento.Uma vez que eu removi o excesso:auto eu poderia agora corrigir o evento onscroll.