jQuery 自定义滚动条

原创 已于 2025-06-27 15:02:08 修改 · 657 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2025-05-13 16:07:44 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 自定义滚动条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        
        .scroll-container {
            width: 500px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .content {
            width: 100%;
            padding: 20px;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .scrollbar {
            width: 10px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #e0e0e0;
            border-radius: 5px;
        }
        
        .scroll-thumb {
            width: 100%;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #888;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .scroll-thumb:hover {
            background-color: #666;
        }
        
        h1 {
            text-align: center;
            margin: 20px 0;
            color: #333;
        }
        
        p {
            margin-bottom: 15px;
            line-height: 1.6;
            color: #555;
        }
        
        /* 插入的网址样式 */
        .inserted-url {
            color: #ff6600;
            font-weight: bold;
            text-decoration: none;
        }
        
        .inserted-url:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>jQuery 自定义滚动条演示</h1>
    
    <div class="scroll-container">
        <div class="content">
            <p>这是一个使用 jQuery 实现的自定义滚动条示例。</p>
            <p>自定义滚动条可以提供更一致的外观和更好的用户体验，特别是在不同浏览器中。</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p>
            <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="scrollbar">
            <div class="scroll-thumb"></div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $container = $('.scroll-container');
            var $content = $('.content');
            var $scrollbar = $('.scrollbar');
            var $thumb = $('.scroll-thumb');
            
            // 计算内容高度和容器高度比例
            var contentHeight = $content.outerHeight();
            var containerHeight = $container.outerHeight();
            var scrollRatio = containerHeight / contentHeight;
            
            // 设置滚动条滑块高度
            $thumb.height(containerHeight * scrollRatio);
            
            // 如果内容不需要滚动，隐藏滚动条
            if (scrollRatio >= 1) {
                $scrollbar.hide();
            }
            
            // 滑块拖动功能
            $thumb.on('mousedown', function(e) {
                e.preventDefault();
                var startY = e.pageY;
                var startTop = $thumb.position().top;
                
                $(document).on('mousemove.scroll', function(e) {
                    var deltaY = e.pageY - startY;
                    var newTop = startTop + deltaY;
                    
                    // 限制滑块在滚动条内移动
                    var maxTop = $scrollbar.height() - $thumb.height();
                    newTop = Math.max(0, Math.min(maxTop, newTop));
                    
                    $thumb.css('top', newTop);
                    
                    // 计算内容位置
                    var contentPos = - (newTop / maxTop) * (contentHeight - containerHeight);
                    $content.css('top', contentPos);
                });
                
                $(document).on('mouseup.scroll', function() {
                    $(document).off('mousemove.scroll mouseup.scroll');
                });
            });
            
            // 鼠标滚轮滚动
            $container.on('wheel', function(e) {
                e.preventDefault();
                var delta = e.originalEvent.deltaY;
                var currentTop = parseInt($thumb.css('top')) || 0;
                var maxTop = $scrollbar.height() - $thumb.height();
                
                var newTop = currentTop + delta * 0.5;
                newTop = Math.max(0, Math.min(maxTop, newTop));
                
                $thumb.css('top', newTop);
                
                // 计算内容位置
                var contentPos = - (newTop / maxTop) * (contentHeight - containerHeight);
                $content.css('top', contentPos);
            });
            
            // 点击滚动条跳转
            $scrollbar.on('click', function(e) {
                if (e.target === $scrollbar[0]) {
                    var clickY = e.pageY - $scrollbar.offset().top;
                    var thumbHeight = $thumb.outerHeight();
                    var newTop = clickY - thumbHeight / 2;
                    var maxTop = $scrollbar.height() - thumbHeight;
                    
                    newTop = Math.max(0, Math.min(maxTop, newTop));
                    $thumb.css('top', newTop);
                    
                    // 计算内容位置
                    var contentPos = - (newTop / maxTop) * (contentHeight - containerHeight);
                    $content.css('top', contentPos);
                }
            });
        });
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值