Рубрики

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

Вертикальная или горизонтальная полоса, расположенная по углам страницы, помогает нам прокручивать страницы или контейнеры вверх, вниз или вбок. Таким образом, процесс должен отключить полосу прокрутки, но полоса прокрутки должна быть видимой. В этой статье мы отключим полосу прокрутки с помощью функции .on () . Нажатием кнопки мы сделаем полосу прокрутки видимой, но отключим.

Отключить использование jQuery с кнопкой: здесь, когда мы отключаем событие прокрутки, прокрутка не будет работать, хотим ли мы сделать полосу прокрутки видимой или нет. Мы запустим функцию отключения нажатием кнопки.

Синтаксис:

$(“selector”).on(event, function)

Пример: этот пример иллюстрирует подход отключения прокрутки с использованием видимости.

<!DOCTYPE html>

<html>

  

<head>

    <title>

        How to disable scrollbar without

        hiding using jQuery?

    </title>

      

    <script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

    </script>

      

    <script>

      

        // On click of button the scroll

        // gets disabled, still visible.

        $(document).ready(function() {

            $("button").click(function() {

                $("p").text("Scroll-bar is disabled"

                        + " but still visible.")

                $('#element').on("mousewheel touchmove",

                        function(e) {

                    e.preventDefault();

                });

            });

        });

    </script>

      

    <style>

      

        /*visible active scrollbar*/

        #element {

            height: 150px;

            width: 400px;

            border: 2px solid black;

            overflow: scroll;

        }

    </style>

</head>

  

<body>

    <center>

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

        <h3>A Computer Science portal for Geeks</h3>

          

        <div id="element">

              

            <b style="font-size:26px;">jQuery:</b>

              

            <article style="font-size:18px; text-align:left;">

                jQuery is an open source JavaScript library 

                that simplifies the interactions between an

                HTML/CSS document, or more precisely the

                Document Object Model (DOM), and JavaScript.

                Elaborating the terms, jQuery simplifies HTML

                document traversing and manipulation, browser 

                event handling, DOM animations, Ajax interactions,

                and cross-browser JavaScript development.

            </article>

        </div>

        <br>

          

        <button>Click</button>

        <p style="color:red"></p>

    </center>

</body>

  

</html>

Выход:

  • Перед нажатием кнопки прокрутка работает:
  • После нажатия кнопки прокрутка не работает:

Примечание. Прокрутка мыши отключена, но если нажать кнопку прокрутки вниз или вверх, рамка сместится.

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

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

0.00 (0%) 0 votes