javascript - 使用 Greensock 的滚动动画问题

Question

我正在使用 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>

Answer 1

只需删除 delta*40 之前的减号 (-)

TweenLite.to(content, 0.5, {scrollTo:{x:content.scrollLeft - (delta*40)}})

(function() {
    var content = document.getElementById("content");
    function scrollHorizontally(e) {

        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
       // ; // Multiplied by 40
        TweenLite.to(content, 0.5, {scrollTo:{x:content.scrollLeft - (delta*40)}})
        e.preventDefault();
    }
    if (content.addEventListener) {
        // IE9, Chrome, Safari, Opera
        content.addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        content.addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } 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:250%;/*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>