如何隐藏不活动的滚动条？

当页面处于非活动状态时，有多种方法可以隐藏滚动条。其中一种方法是使用 onscroll、onmousewheel、onclick 和 onmousemove 事件，它们帮助我们使用基本的 HTML 和 JavaScript 实现我们的目标。

方法：

• onscroll 事件用于禁用滚动条。
• 只要页面滚动， onscroll 事件就会起作用。因此，setTimeout() 方法用于提供隐藏滚动条的延迟，以便我们能够先向下滚动。
• 时间可以根据我们的要求进行调整。
• onmousemove 事件用于在鼠标指针移动后立即启用滚动。 onclick 事件用于在用户单击时立即启用滚动。 onmousewheel 事件用于在页面向下滚动时立即启用滚动。因此，这些事件帮助我们在页面再次激活时启用滚动。

示例 1：只要鼠标移动、鼠标滚动或用户单击，就会调用 enableScrolling()函数，它允许我们向下滚动。当用户尝试向下滚动时，将调用 disableScrolling()函数，使滚动条在 1000 毫秒后消失。这个时间可以变化。要再次启用滚动条，请移动鼠标指针，或单击或滚动鼠标指针以调用 enableScrolling()函数。文本的样式是使用“style”标签完成的。 HTML 和 JavaScript 代码如下：

  

    
    
        How to hide scroll bar
        for inactivity?
    
      
    
        p {
            font-size: 2rem;
        }
    

  

      
    
        Geeks for Geeks is a Computer Science
        Portal created with the goal of
        providing well written, well thought
        and well-explained solutions for
        selected questions. Geeks for Geeks 
        has covered everything, ranging from
        algorithms and data structure courses
        to competitive exam preparation courses. 
        Geeks for Geeks is in true sense a
        a haven for geeks, where Tech lovers can
        come together and share their knowledge.
    
  
    
      
        // JavaScript code
        function disableScrolling() {
            setTimeout(function() {
                document.body.style.overflow = 'hidden';
            }, 1000);
        }
          
        function enableScrolling() {
            document.body.style.overflow = '';
        }
    

  

输出：

示例 2：此示例隐藏图像上的滚动条。

  

    
    
        How to hide scroll bar
        for inactivity?
    
  
    
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 150%;
        }
    

  

  
    
  
    
      
        // JavaScript code
        function disableScrolling() {
            setTimeout(function() {
                document.body.style.overflow = 'hidden';
            }, 1000);
        }
          
        function enableScrolling() {
            document.body.style.overflow = '';
        }
    

  

输出：

隐藏滚动条的主要缺点是一旦滚动条隐藏，主体的内容就会“跳跃”以填充滚动条占用的空间。因此，它对用户似乎不是很有吸引力。