Как прокрутить прокрутку мыши для IE 11, используя JQuery / Javascript - PullRequest
Новая
       31

Как прокрутить прокрутку мыши для IE 11, используя JQuery / Javascript

1 голос
/ 23 апреля 2019

У меня есть 2 вложенных элемента в моем HTML-файле. Когда прокрутка попадает в верх или низ дочернего элемента Div, элемент Body также начинает прокручиваться. Чтобы остановить это, я написал функцию, которая вызывается из события OnScroll для дочернего элемента HTML, чтобы сделать прокрутку независимой для дочернего элемента и родительского элемента div.

Функция, которую я написал, выглядит следующим образом: 

function selectiveScroll(elementObj)
{
    $(elementObj).bind('mousewheel DOMMouseScroll wheel', function(e) 
    {
        var scrollTo = 0;

        if (e.type == 'mousewheel') 
        {       
            scrollTo = (e.originalEvent.wheelDelta)/(-120);
            //alert("mousewheel " + e.originalEvent.wheelDelta + " " + scrollTo  );
        }
        else if (e.type == 'wheel') 
        {
            //alert("wheel " + e.originalEvent.wheelDelta + " " + scrollTo);
            scrollTo = (e.originalEvent.wheelDelta * -1)/80;
        }
        else if (e.type == 'DOMMouseScroll') 
        {
            //alert("DOMMouseScroll " + e.originalEvent.detail);
            scrollTo = 40 * e.originalEvent.detail;
        }

        if (scrollTo) 
        {
            //alert("scrollTo " + scrollTo );           
            $(this).scrollTop($(this).scrollTop() + scrollTo);
            e.preventDefault();
        }
    });
}

Для браузера Google Chrome это исправление работало, но для IE 11 прокрутка мыши ограничена дочерним и родительским, но когда дочерняя прокрутка, после начальной прокрутки достигает конца на 1 метку в направлении вверх / вниз колеса мыши прокручивает весь путь вверх или до самого дна ребенка.

Я понимаю, что: Для IE: mousewheel является слушателем событий Для Chrome: Wheel - слушатель событий Для FireFox: DomMouseScroll является прослушивателем событий

Но я не понимаю первый блок «Если» «scrollTo = (e.originalEvent.wheelDelta) / (- 120);» Часть.

Как контролировать, сколько прокрутки происходит с помощью 1 метки колеса мыши для IE?

1 Ответ

1 голос
/ 24 апреля 2019

Ссылаясь на этой статьи , мы можем знать, что значение атрибута wheelDelta равно 120 за метку. 

scrollTo = (e.originalEvent.wheelDelta)/(-120);

так что, если вы используете вышеуказанный код, он будет прокручиваться до верхней части контейнера.

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

когда вы прокручиваете мышь один раз, она прокручивает следующие 120 позиций. 

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body {
            min-height: 1200px;
        }

        div#abs {
            position: absolute;
            top: 50px;
            left: 30px;
            height: 400px;
            width: 200px;
            background-color: gray;
            overflow: scroll;
        }
    </style>
    <script>
        $(function () {
            $('#abs').bind('mousewheel DOMMouseScroll', function (e) {
                var scrollTo = 0;
                e.preventDefault();
                if (e.type == 'mousewheel') {
                    scrollTo = (e.originalEvent.wheelDelta * -1);
                    //scrollTo = (e.originalEvent.wheelDelta)/(-120);
                    alert("w" + e.originalEvent.wheelDelta);
                }
                else if (e.type == 'DOMMouseScroll') {
                    scrollTo = 40 * e.originalEvent.detail;
                    alert("d" + e.originalEvent.detail);
                }
                $(this).scrollTop(scrollTo + $(this).scrollTop());

            });

        });
    </script>
</head>
<body>
    <div id="output"></div>
    <div id="output2"></div>
    <div id="abs">
        Absolutely positioned div
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Long
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        That
        <br />
        <br />
        <br />
        Is
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
        Really
        <br />
        <br />
        <br />
    </div>
</body>

результат, подобный этому:

enter image description here

...