Скрипт колеса мыши не работает в книге MAC

Я должен отображать статьи по горизонтали, который работает. даже это также работает на событие колеса мыши. Я имею в виду, что если прокрутить немного колесико мыши, то оно будет прокручиваться медленно, если колесико мыши работает быстро, тогда все статьи скользят очень быстро.

В Windows нет проблем (Chrome, Mozilla, Microsoft edge), но когда я проверяю в MAC(Chrome, Mozilla, Safari), он очень быстро скользит.

Не могли бы вы помочь мне в этом?

 /*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;
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 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script 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/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>

0 ответов

Другие вопросы по тегам