-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmyscroll.html
84 lines (74 loc) · 2.19 KB
/
myscroll.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 1000px;
}
#horizontal_scroll {
margin:;
width: auto;
height: 100%;
overflow:hidden;
background-color: black;
}
.block {
width: 50%;
height: 100%;
overflow:hidden;
}
#blockleft{
float:left;
background: yellow;
}
#blockrigth{
float:right;
background: blue;
}
</style>
</head>
<body>
<div id="horizontal_scroll">
<div class = "block left" id="blockleft"></div>
<div class = "block rigth" id="blockrigth"></div>
</div>
<script>
function addOnWheel(elem, handler) {
if (elem.addEventListener) {
if ('onwheel' in document) {
// IE9+, FF17+
elem.addEventListener("wheel", handler);
} else if ('onmousewheel' in document) {
// устаревший вариант события
elem.addEventListener("mousewheel", handler);
} else {
// 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
elem.addEventListener("MozMousePixelScroll", handler);
}
} else { // IE8-
horizontal_scroll.attachEvent("onmousewheel", handler);
}
}
var scale = 0,
rightBorder = blockleft.getBoundingClientRect().right;
addOnWheel(horizontal_scroll, function(e) {
var delta = e.deltaY || e.detail || e.wheelDelta;
// Сдвигаем при помощи CSS
if (delta > 0) scale -= 40;
else scale += 40;
if (blockleft.getBoundingClientRect().right+scale > rightBorder){
e.preventDefault();
return;
}
blockleft.style.transform = blockleft.style.WebkitTransform = blockleft.style.MsTransform = 'translateX(' + scale + 'px'+')';
blockrigth.style.transform = blockrigth.style.WebkitTransform = blockrigth.style.MsTransform = 'translateX(' + (-scale) + 'px'+')';
if (blockleft.getBoundingClientRect().right<=0){
horizontal_scroll.style.display = "none";
}
// отменим прокрутку
e.preventDefault();
});
</script></body>
</html>