【发布时间】：2017-11-22 08:49:52
【问题描述】：
我正在使用 GreenSock(https://greensock.com/get-started-js) 制作动画。
问题是，当我向下滚动鼠标滚轮时，动画从右到左工作。这不是一项权利。我需要当鼠标滚轮向上然后从右到左动画并且鼠标滚轮向下然后从左到右动画。我需要一个快速滚动。
当鼠标滚轮滚动的速度比从右到左的快，反之亦然？
我尝试了一些代码但无法正常工作。
你能帮我解决这个问题吗？
/*scroll the page horizontal*/
(function() {
var content = document.getElementById("content"); // container of scrollable content
var xScroll = 0; // initialize virtual scroll position
var ignore = false; // ignore flag, decides whether xScroll needs to be updated (user scrolls via scrollbar) or not (user scrolls via mousewheel)
function scrollHorizontally(e) {
// every browser gives another e.deltaY -> only get the current direction and set an own speed
var direction = (e.deltaY>0) ? 1 : -1;
xScroll = xScroll+direction*120; // calculate new virtual scroll positon -> scroll position at the end of animation
// set limits to avoid overshooting and stucking at beginning or end
var max = content.scrollWidth - content.clientWidth;
if (xScroll <= 0) {
xScroll = 0;
} else if (xScroll >= max) {
xScroll = max;
}
ignore = true; // user scrolls via mousewheel -> block updates of xScroll until animation ahs finished
// scroll smooth to xScroll
TweenLite.to(content, 1, { ease: Power1.easeOut, scrollTo:{x:xScroll} });
e.preventDefault();
}
function updateXScroll(e) {
if (xScroll == content.scrollLeft) {
// scroll animation has finished -> reset ignore flag -> xScroll will be updated again
ignore = false;
}
if (!ignore) {
// if scroll event was NOT fired by mousewheel, update xScroll
xScroll = content.scrollLeft;
}
}
if (content.addEventListener) {
// Standard
content.addEventListener("scroll", updateXScroll, false); // update xScroll at scrollbar scrolls
content.addEventListener("wheel", scrollHorizontally, false); // make smooth scroll animation when srolling via mousewheel
} else {
// IE 6/7/8
content.attachEvent("onmousewheel", scrollHorizontally);
}
})();#content {
position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content > div{
overflow: hidden;
width:350%;/*to increase the width */
}
.horizontal_scroll .full_screen_100
{
height: 100%;
background-color: #fff;
display: flex;
}
.horizontal_scroll .full_screen_100 article{
width: 900px;
height: 100%;
float:left;
border-left: solid 1px #E2E2E2;
}<div id="content">
<div class="horizontal_scroll">
<div class="full_screen_100">
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</article>
<article>
<span class="page_slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</article>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>【问题讨论】：
标签： javascript jquery html scroll gsap