<!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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
