|
Сообщение от korih
|
|
страница имеет overflow:hidden.
|
|
Сообщение от korih
|
|
как при прокрутке колёсиком двигать эти блоки вверх-вниз зависимо от стороны прокрутки колёсиком.
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding: 0;
}
article {
width: 100%;
height: 200px;
text-align: center;
font-size: 4em;
line-height: 2.6em;
}
article:nth-child(2n) {
background: #FFCC00;
color: #FFFFFF;
}
body{
overflow: hidden;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
function d() {
b = !1
}
var b = !1;
$(window).on("mousewheel DOMMouseScroll", function(c) {
c.preventDefault();
if (!b) {
b = !0;
var a = $(this).scrollTop() / 200 | 0,
a = 200 * a + (0 <= c.originalEvent.wheelDelta ? -200 : 200);
0 > a || a > $("html").height() + 200 - $(window).height() ? b = !1 : $("html, body")
.not(":animated").animate({scrollTop: a}, 800, "swing", d)
}
})
});
</script>
</head>
<body>
<article class="article-post">01</article>
<article class="article-post">02</article>
<article class="article-post">03</article>
<article class="article-post">04</article>
<article class="article-post">05</article>
<article class="article-post">06</article>
<article class="article-post">07</article>
<article class="article-post">08</article>
<article class="article-post">09</article>
<article class="article-post">10</article>
<article class="article-post">11</article>
<article class="article-post">12</article>
<article class="article-post">13</article>
<article class="article-post">14</article>
<article class="article-post">15</article>
<article class="article-post">16</article>
<article class="article-post">17</article>
<article class="article-post">18</article>
<article class="article-post">19</article>
<article class="article-post">20</article>
<article class="article-post">21</article>
</body>
</html>