-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathscroll-event.html
31 lines (31 loc) · 8.05 KB
/
scroll-event.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll event firing on scroll restoration</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width">
</head>
<body>
<h1>Scroll event firing on scroll restoration</h1>
<h1>在滚动恢复时触发的 scroll 事件</h1>
<!--lorem--> <p>Scroll this page down, refresh, you'll see scrolltop restored. The <code>scroll</code> event wont't fire in iOS UIWebview (UC Browser, Baidubox).</p> <!--/lorem-->
<!--lorem--> <p>滚动本页面到底并刷新，浏览器会恢复滚动位置。在 iOS UIWebview（UC 浏览器，手机百度）下不会触发 <code>scroll</code> 事件。</p>
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<!--lorem--> <p>Adipiscing elit. In sit amet nunc id quam porta varius. Ut aliquet facilisis turpis. Etiam pellentesque quam et erat. Praesent suscipit justo.</p> <p>Cras nec metus pulvinar sem tempor hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in nulla. Mauris elementum. Curabitur tempor, quam ac rutrum placerat, nunc augue ullamcorper est, vitae molestie neque nunc a nunc. Integer justo dolor, consequat id, rutrum auctor, ullamcorper sed, orci. In hac habitasse platea dictumst. Fusce euismod semper orci. Integer venenatis quam non nunc. Vivamus in lorem a nisi aliquet commodo. Suspendisse massa lorem, dignissim at, vehicula et, ornare.</p> <!--/lorem-->
<script src="https://cdn.jsdelivr.net/npm/screenlog@0.2.2/screenlog.min.js"></script>
<script>
screenLog.init()
window.addEventListener('scroll', function () {
screenLog.log('scroll fired, top:', window.scrollY)
})
</script>
</body>
</html>