Отключить прокрутку тела при прокрутке iframe в MOBILE - PullRequest
Новая
       29

Отключить прокрутку тела при прокрутке iframe в MOBILE

0 голосов
/ 10 мая 2018

Ниже кода

В компьютере я могу отключить прокрутку тела во время прокрутки iframe, обнаружив мышь

В мобильном телефоне я пытаюсь отключить прокрутку тела, обнаруживая касание в теле, но НЕ РАБОТАЮ.Я вижу, что h1 меняется на авто, если я касаюсь точки за пределами simulator, а h1 не меняется на авто, если я касаюсь simulator.

Любое предложение, чтобы исправить это? 

<!DOCTYPE html>
<html>
    <body>

        <section>

            <iframe id="simulator" style="background: #000000;" src="" width="378px" height="1500px" frameborder="0" scrolling="no"></iframe>

            <h1 id="toucheventtt">dsds</p>

            <script>
                function disable_scroll() {
                    document.body.style.overflow="hidden";
                    document.getElementById("toucheventtt").innerHTML = "hidden";
                }
                function enable_scroll() {
                    document.body.style.overflow="auto";
                    document.getElementById("toucheventtt").innerHTML = "auto";
                }
                document.getElementById("simulator").onmouseenter = disable_scroll;
                document.getElementById("simulator").onmouseleave = enable_scroll;

                document.body.addEventListener('touchstart', function(){
                    enable_scroll();
                }, false)
                document.body.addEventListener('touchend', function(){
                    disable_scroll();
                }, false)
            </script>

        </section>
    </body>
</html>

Также добавление приведенного ниже кода работает только для компьютера. 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        html, body {
            overflow-y: hidden;
        }
        body {
            position: relative;
        }
    </style>
</head>

1 Ответ

0 голосов
/ 10 мая 2018

попробуйте использовать эти свойства:

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

touchstart 

document.body.addEventListener('touchstart', function(){
    document.body.style.overflow="hidden";
}, false)

для onmouseleave вы можете использовать касание, которое срабатывает, когда пользователь удаляет точку касания с поверхности.Он срабатывает независимо от того, удалена ли точка касания внутри привязанного элемента или снаружи, например, если палец пользователя выдвинулся из элемента первым или даже с края экрана.

touchend 

document.body.addEventListener('touchend', function(){
    document.body.style.overflow="auto";
}, false)
...