forked from ilyashubin/scrollbooster
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (65 loc) · 2.16 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scrollbooster mini test</title>
<style>
.app {
width: 400px;
height: 400px;
border: 10px solid #460a78;
overflow: hidden;
/* overflow: scroll; */
}
.app-inner {
width: 800px;
height: 700px;
border: 10px solid #edb197;
padding: 50px;
background: #44bdf6;
}
.app-inner span {
color: skyblue;
}
</style>
</head>
<body>
<div class="app">
<div class="app-inner">
Lorem <a href="https://dribbble.com/">ipsum dolor sit</a> amet consectetur adipisicing elit. Exercitationem corrupti reiciendis, mollitia molestias magni quasi voluptates culpa dignissimos minima hic.
Lorem ipsum dolor sit amet consectetur adipisicing elit. In praesentium odit ex officia, possimus qui omnis, facere incidunt neque ducimus suscipit! Vel, neque! Sapiente tempora veritatis voluptatem itaque! Repellendus, optio.
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque iusto vitae quibusdam debitis illum consequuntur iste laborum fuga laboriosam mollitia.</div>
<div><button onclick="console.log('hello')">Some button</button></div>
</div>
</div>
<script src="/dist/scrollbooster.js"></script>
<script>
let viewport = document.querySelector('.app')
let content = viewport.querySelector('.app-inner')
let scr = new ScrollBooster({
viewport: viewport,
content: content,
// textSelection: true,
emulateScroll: true,
onClick: (data, event)=> {
event.preventDefault()
},
shouldScroll: (data, event) => {
if (event.target.tagName == 'BUTTON') {
return false
} else {
return true
}
},
onUpdate: (data)=> {
// viewport.scrollLeft = data.position.x
// viewport.scrollTop = data.position.y
content.style.transform = `translate(
${-data.position.x}px,
${-data.position.y}px
)`
}
})
</script>
</body>
</html>