Рубрики

Как временно отключить прокрутку с помощью JavaScript?

Прокрутка может быть отключена с помощью JavaScript двумя способами:

Способ 1: переопределение функции window.onscroll

Событие window.onscroll возникает, когда окно прокручивается. Переопределение этой функции и установка ее в фиксированное положение каждый раз, когда происходит прокрутка, эффективно отключит эффект прокрутки.

Текущая позиция прокрутки сверху определяется с помощью значений window.pageYOffset и document.documentElement.scrollTop . Эти 2 свойства возвращают текущую позицию прокрутки y. Они используются вместе с использованием оператора OR, поскольку один из них может возвращать 0 в определенных браузерах.

Точно так же текущая позиция прокрутки слева определяется с помощью значений window.pageXOffset и document.documentElement.scrollLeft . Эти 2 свойства возвращают текущую позицию прокрутки x.

Затем метод window.scrollTo () используется с этими двумя значениями, чтобы установить для позиции прокрутки текущей страницы это значение.

Чтобы включить прокрутку назад, window.onscroll переопределяется пустой функцией. Это позволит снова прокрутить страницу.

Синтаксис:

function disableScroll() {

    // Получить текущую позицию прокрутки страницы

    scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,

  

        // при попытке прокрутки установить это значение на предыдущее

        window.onscroll = function() {

            window.scrollTo(scrollLeft, scrollTop);

        };

}

  

function enableScroll() {

    window.onscroll = function() {};

}

Пример: переопределение функции window.onscroll

<!DOCTYPE html>

<html>

  

<head>

    <title>How to disable scrolling 

      temporarily using JavaScript?</title>

    <style>

        .scrollable-place {

            height: 1000px;

        }

    </style>

</head>

  

<body>

    <h1 style="color: green">

      GeeksforGeeks

  </h1>

  

    <b>How to disable scrolling temporarily

      using JavaScript?</b>

    <p>Click on the buttons below to enable or disable scrolling.</p>

  

    <p class="scrollable-place">

        <button onclick="disableScroll()">Disable Scrolling</button>

        <button onclick="enableScroll()">Enable Scrolling</button>

    </p>

  

    <script>

        function disableScroll() {

            // Get the current page scroll position

            scrollTop = 

              window.pageYOffset || document.documentElement.scrollTop;

            scrollLeft = 

              window.pageXOffset || document.documentElement.scrollLeft,

  

                // if any scroll is attempted,

                // set this to the previous value

                window.onscroll = function() {

                    window.scrollTo(scrollLeft, scrollTop);

                };

        }

  

        function enableScroll() {

            window.onscroll = function() {};

        }

    </script>

</body>

  

</html>

Выход:

Способ 2: установка высоты тела на 100% и переполнение на скрытое

В этом методе создается новый класс CSS, где высота установлена на 100%, а полоса прокрутки отключена путем установки свойства переполнения скрытым.

.stop-scrolling {

    height: 100%;

    overflow: hidden;

}

Всякий раз, когда прокрутка должна быть отключена, этот класс добавляется в тело с помощью метода document.body.classList.add («classname») . Этот метод добавляет указанное имя класса в список классов элемента body.

Чтобы включить прокрутку назад, этот класс удаляется из тела с помощью метода document.body.classList.remove («classname») . Этот метод удаляет указанное имя класса в список классов элемента body. Это позволит снова прокрутить страницу.

Синтаксис:

function disableScroll() {

    document.body.classList.add("stop-scrolling");

}

  

function enableScroll() {

    document.body.classList.remove("stop-scrolling");

}

Пример: установка высоты тела на 100% и переполнение на скрытое

<!DOCTYPE html>

<html>

  

<head>

    <title>How to disable scrolling

      temporarily using JavaScript?</title>

    <style>

        .scrollable-place {

            height: 1000px;

        }

          

        .stop-scrolling {

            height: 100%;

            overflow: hidden;

        }

    </style>

</head>

  

<body>

    <h1 style="color: green">GeeksforGeeks</h1>

    <b>How to disable scrolling temporarily using JavaScript?</b>

    

    <p>Click on the buttons below to enable or disable scrolling.</p>

    

    <p class="scrollable-place">

        <button onclick="disableScroll()">Disable Scrolling</button>

        <button onclick="enableScroll()">Enable Scrolling</button>

    </p>

  

    <script>

        function disableScroll() {

            document.body.classList.add("stop-scrolling");

        }

  

        function enableScroll() {

            document.body.classList.remove("stop-scrolling");

        }

    </script>

</body>

  

</html>

Выход:

Рекомендуемые посты:

Как временно отключить прокрутку с помощью JavaScript?

0.00 (0%) 0 votes