Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Mantener posición de scroll de un div al recargar

JavaScript - Mantener posición de scroll de un div al recargar

Volver
Nuevo Tema
<<>>
 
Vista:

Mantener posición de scroll de un div al recargar

Publicado por Olivares (2 intervenciones) el 16/07/2017 22:28:40
Estoy algo verde con este tema, alguien sabe de algún ejemplo que ande por allí, no encuentro nada por google...

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Mantener posición de scroll de un div al recargar

Publicado por Olivares (2 intervenciones) el 18/07/2017 17:42:06
Tengo esto pero lo hace en el body

1
2
3
4
5
6
7
8
9
<script>
window.onload=function(){
var pos=window.name || 0;
window.scrollTo(0,pos);
}
window.onunload=function(){
window.name=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de [abZeroX]
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mantener posición de scroll de un div al recargar

Publicado por [abZeroX] (130 intervenciones) el 18/07/2017 23:51:17
Hola, te comparto un ejemplo tal vez te sirva, utiliza la api de html5 localStorage para guardar la posición actual del scrollTop y asi no perderla al recargar la web.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Scroll</title>
	<style type="text/css">
		.container {
			width: 500px;
			max-height: 200px;
			border: 2px solid #333;

			overflow-x: hidden;
			overflow-y: scroll;
			margin: 2rem auto;
			background-color: #00afef;

		}
		/* Test result */
		.test-result {
		  position: absolute;
		  top: 10px;
		  right: 10px;
		  line-height: 1;
		}
	</style>
</head>
<body>
	<div class="test-result" id="test-result"></div>
 
	<div class="container">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sed iste soluta vel esse odit voluptatibus, nam quae nostrum neque, deleniti iure ex modi rem quas alias nisi pariatur aliquid!
	</div>
 
	<script>
		let container = document.querySelector('.container');
		let testResult = document.getElementById('test-result');
		window.onload = function() {
			if (typeof(Storage) !== 'undefined') {
				if (localStorage.getItem('scrollTop')) {
					testResult.innerHTML = 'Scroll-Top: ' + localStorage.getItem('scrollTop')+ 'px';
					container.scrollTop = localStorage.getItem('scrollTop');
				} else {
					testResult.innerHTML = 'Scroll-Top: 0';
				}
			} else {
				console.log('Sorry! No Web Storage support..');
			}
 
			container.addEventListener('scroll', function(e) {
				let scrollTop = this.scrollTop;
				testResult.innerHTML = 'Scroll-Top: ' + scrollTop + 'px';
 
				if (typeof(Storage) !== 'undefined') {
					localStorage.setItem('scrollTop', scrollTop);
				} else {
					console.log('Sorry! No Web Storage support..');
				}
			});
		};
	</script>
 
</body>
</html>

Nos comentas si es lo que buscabas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar