Hide Scrollbars

Hide-Scrollbars 网页总结

Hide-Scrollbars 是轻量级 JavaScript 库，可隐藏网页滚动条、自定义样式并禁止图片拖动，提升美观度与体验。

核心功能包括：隐藏水平滚动条，自定义垂直滚动条宽度、颜色，自动检测内容高度控制垂直滚动条显隐；禁止图片拖动，优化鼠标交互，点击图片可滑动页面；支持 Chrome、Firefox 等主流浏览器，适配响应式设计。

使用时，在 HTML 引入脚本文件或粘贴源码即可。版本迭代中，修复了兼容性、滚动条异常及图片拖动问题。

版权方面，保留头部版权可用于个人或商业用途，禁止转卖、修改版权后传播，技术支持可联系开发者“念网创”。

已关闭AI总结

Hide Scrollbars

一个轻量级的JavaScript库，用于隐藏页面滚动条并禁止图片拖动，提升网页美观度和用户体验。

功能特性

  • 隐藏水平滚动条
  • 自定义垂直滚动条样式
  • 禁止图片拖动
  • 跨浏览器兼容性
  • 响应式设计支持

使用方法

在HTML文件中引入脚本：

1
<script src="js/hide-scrollbars.js"></script>

或者在页面底部添加：

1
2
3
<script>
  // 复制粘贴 hide-scrollbars.js 的内容
</script>

文件我放在了最后

特性说明

滚动条控制

  • 自动检测内容高度，根据需要显示或隐藏滚动条
  • 美观的滚动条样式设计
  • 隐藏滚动条箭头按钮

图片拖动控制

  • 禁止所有图片的拖动行为
  • 优化鼠标交互体验
  • 保持页面滚动功能

浏览器兼容性

  • Chrome/Safari (WebKit内核浏览器)
  • Firefox
  • Internet Explorer/Edge

<a id = “section4”更新日志>

  • v1.0.0: 初始版本，基本功能实现
  • v1.1.0: 优化了滚动条隐藏效果，提升页面美观度
  • v1.1.1: 修复了部分浏览器兼容性问题
  • v2.0.0: 修复了部分浏览器下滚动条显示异常的问题
  • v2.1.0: 优化了滚动条显示逻辑，提升用户体验
  • v2.1.1: 修复了图片拖动问题，增强了页面交互性

版权声明

请尊重原创，保留头部版权
在保留版权的前提下可应用于个人或商业用途
但禁止转卖、转贴、修改版权后转卖或转贴——————-违者必究

许可证

本项目遵循版权保护，保留所有权利。

技术支持

如果有问题，请联系我们：念网创

源码文件

点击此处查看源码文件 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/*!
 * title: Hide scrollbars (and disable image dragging)
 * 标题：隐藏滚动条（并禁止图片拖动）
 * 
 * 请尊重原创，保留头部版权
 * 开发者：念网创（New Web Create）
 * 邮箱：newwebcreate@hotmail.com
 * 在保留版权的前提下可应用于个人或商业用途
 * 但禁止转卖、转贴、修改版权后转卖或转贴-------------------违者必究
 * 
 * 更新历史：
 * v1.0.0：初始版本，基本功能实现
 * v1.1.0：优化了滚动条隐藏效果，提升页面美观度
 * v1.1.1：修复了部分浏览器兼容性问题
 * v2.0.0：修复了部分浏览器下滚动条显示异常的问题
 * v2.1.0：优化了滚动条显示逻辑，提升用户体验
 * v2.1.1：修复了图片拖动问题，增强了页面交互性

 */
(function() {
    // 动态添加内联样式到文档头部
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
        /* 隐藏水平滚动条 */
        html, body {
            overflow-x: hidden;
        }

        /* 设置垂直滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px; /* 设置滚动条宽度 */
        }

        ::-webkit-scrollbar-thumb {
            background-color: #ddd; /* 滚动条颜色 */
            border-radius: 3px; /* 滚动条圆角 */
        }

        ::-webkit-scrollbar-track {
            background-color: transparent; /* 滚动条轨道颜色 */
        }

        /* 隐藏滚动条的小三角（箭头） */
        ::-webkit-scrollbar-button {
            display: none;
        }

        /* 针对 Firefox */
        html {
            scrollbar-width: thin;
            scrollbar-color: #ddd transparent;
        }

        /* 针对 IE 和 Edge */
        html {
            -ms-overflow-style: none;
        }

        /* 禁止图片拖动 */
        img {
            -webkit-user-drag: none;
            user-drag: none;
        }
    `;
    document.head.appendChild(style);

    // 检查内容高度，决定是否显示滚动条
    function adjustScrollbar() {
        const body = document.body;
        const html = document.documentElement;

        const height = Math.max(
            body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight
        );

        if (height <= window.innerHeight) {
            // 如果内容高度小于视口高度，隐藏滚动条
            document.documentElement.style.overflowY = 'hidden';
        } else {
            // 如果内容高度大于视口高度，显示滚动条
            document.documentElement.style.overflowY = 'scroll';
        }
    }

    // 在窗口大小改变时重新检查
    window.addEventListener('resize', adjustScrollbar);

    // 禁止图片拖动
    document.querySelectorAll('img').forEach(img => {
        img.ondragstart = function() {
            return false;
        };
    });

    // 允许点击图片后滑动页面
    document.querySelectorAll('img').forEach(img => {
        img.addEventListener('mousedown', function(event) {
            // 阻止默认行为（拖动图片）
            event.preventDefault();
            // 允许滑动页面
            document.documentElement.style.cursor = 'grabbing';
        });

        img.addEventListener('mouseup', function() {
            // 恢复默认光标样式
            document.documentElement.style.cursor = 'default';
        });
    });

    // 确保页面加载完成后滚动条正确显示
    window.addEventListener('load', () => {
        adjustScrollbar();
        document.documentElement.style.overflowY = 'auto'; // 确保滚动条在页面加载后显示
    });

    // 确保页面重新加载时滚动条正确显示
    window.addEventListener('pageshow', () => {
        adjustScrollbar();
        document.documentElement.style.overflowY = 'auto'; // 确保滚动条在页面重新加载后显示
    });
})();