如何使用jQuery禁用滚动条而不隐藏

如何使用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禁用滚动条而不隐藏?
  • 点击按钮后,滚动就不工作了。
    如何使用jQuery禁用滚动条而不隐藏?

注意:鼠标滚动是禁用的,但如果你点击向下或向上的滚动按钮,框架会移动。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程