jQuery自定义滚动条实现_自定义实现页面滚动条功能-优快云博客

<!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>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
line-height: 1.6;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}

.intro {
margin-bottom: 30px;
}

/* 自定义滚动条容器 */
.custom-scroll-container {
position: relative;
width: 100%;
height: 300px;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}

/* 内容区域 */
.scroll-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px;
}

/* 垂直滚动条 */
.scrollbar-vertical {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background-color: #f1f1f1;
}

.scrollbar-thumb {
position: absolute;
width: 100%;
background-color: #95a5a6;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.scrollbar-thumb:hover {
background-color: #7f8c8d;
}

/* 内容样式 */
.content-block {
margin-bottom: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 4px;
}

.content-block h3 {
margin-bottom: 10px;
color: #3498db;
}

/* 代码示例区域 */
.code-example {
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin-top: 30px;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
overflow-x: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery自定义滚动条实现</h1>

<div class="intro">
<p>自定义滚动条可以提供更好的视觉效果和用户体验，特别是在需要统一设计风格的网页应用中。</p>
</div>

<div class="custom-scroll-container" id="scrollContainer">
<div class="scroll-content" id="scrollContent">
<div class="content-block">
<h3>内容区块1</h3>
<p>这是第一个内容区块。自定义滚动条可以完全控制滚动行为和样式。</p>
<p>jQuery提供了强大的DOM操作和事件处理能力，使得实现自定义滚动条变得简单。</p>
</div>
<div class="content-block">
<h3>内容区块2</h3>
<p>这是第二个内容区块。自定义滚动条通常用于以下场景：</p>
<ul>
<li>需要统一设计风格的网页应用</li>
<li>需要特殊滚动效果的页面</li>
<li>需要隐藏默认滚动条但仍需滚动功能的情况</li>
</ul>
</div>
<div class="content-block">
<h3>内容区块3</h3>
<p>这是第三个内容区块。实现自定义滚动条的关键步骤：</p>
<ol>
<li>创建一个内容容器并设置overflow:hidden</li>
<li>创建自定义滚动条元素</li>
<li>计算内容高度和容器高度的比例关系</li>
<li>处理鼠标拖动和滚轮事件</li>
</ol>
</div>
<div class="content-block">
<h3>内容区块4</h3>
<p>这是第四个内容区块。自定义滚动条的优势：</p>
<ul>
<li>完全控制滚动条的样式和外观</li>
<li>跨浏览器一致性</li>
<li>可以实现独特的滚动效果</li>
</ul>
</div>
<div class="content-block">
<h3>内容区块5</h3>
<p>这是第五个内容区块。</p>
<p>自定义滚动条虽然提供了更多控制权，但也需要考虑性能影响和触摸设备兼容性。</p>
</div>
</div>
<div class="scrollbar-vertical" id="scrollBar">
<div class="scrollbar-thumb" id="scrollThumb"></div>
</div>
</div>

<div class="code-example">
<h3>jQuery自定义滚动条核心代码：</h3>
<pre>
$(document).ready(function() {
const $container = $('#scrollContainer');
const $content = $('#scrollContent');
const $scrollBar = $('#scrollBar');
const $thumb = $('#scrollThumb');

let isDragging = false;
let startY, startTop;

// 初始化滚动条
function initScrollbar() {
const containerHeight = $container.height();
const contentHeight = $content.height();

// 计算滚动条滑块高度
const thumbHeight = Math.max(
(containerHeight / contentHeight) * containerHeight,
30
);

$thumb.height(thumbHeight);

// 设置内容可滚动范围
maxScrollTop = contentHeight - containerHeight;
maxThumbTop = containerHeight - thumbHeight;

// 如果内容不需要滚动，隐藏滚动条
if (maxScrollTop <= 0) {
$scrollBar.hide();
} else {
$scrollBar.show();
}
}

// 更新滚动条滑块位置
function updateThumbPosition() {
const scrollTop = -$content.position().top;
const thumbTop = (scrollTop / maxScrollTop) * maxThumbTop || 0;
$thumb.css('top', thumbTop);
}

// 鼠标滚轮事件
$container.on('wheel', function(e) {
e.preventDefault();
const delta = e.originalEvent.deltaY > 0 ? 30 : -30;
const newTop = $content.position().top - delta;

$content.css('top', Math.max(-maxScrollTop, Math.min(newTop, 0)));
updateThumbPosition();
});

// 拖动滚动条滑块
$thumb.on('mousedown', function(e) {
isDragging = true;
startY = e.pageY;
startTop = parseInt($thumb.css('top')) || 0;

$(document).on('mousemove.scroll', function(e) {
if (!isDragging) return;

const deltaY = e.pageY - startY;
let newTop = startTop + deltaY;

newTop = Math.max(0, Math.min(newTop, maxThumbTop));
$thumb.css('top', newTop);

// 同步内容位置
const scrollTop = (newTop / maxThumbTop) * maxScrollTop;
$content.css('top', -scrollTop);
});

$(document).on('mouseup.scroll', function() {
isDragging = false;
$(document).off('.scroll');
});
});

// 初始化
initScrollbar();
$(window).on('resize', initScrollbar);
});

</pre>
</div>
</div>

<script>
$(document).ready(function() {
const $container = $('#scrollContainer');
const $content = $('#scrollContent');
const $scrollBar = $('#scrollBar');
const $thumb = $('#scrollThumb');

let isDragging = false;
let startY, startTop;
let maxScrollTop, maxThumbTop;

// 初始化滚动条
function initScrollbar() {
const containerHeight = $container.height();
const contentHeight = $content.height();

// 计算滚动条滑块高度
const thumbHeight = Math.max(
(containerHeight / contentHeight) * containerHeight,
30 // 最小高度
);

$thumb.height(thumbHeight);

// 设置内容可滚动范围
maxScrollTop = contentHeight - containerHeight;
maxThumbTop = containerHeight - thumbHeight;

// 如果内容不需要滚动，隐藏滚动条
if (maxScrollTop <= 0) {
$scrollBar.hide();
$content.css('top', 0);
} else {
$scrollBar.show();
updateThumbPosition();
}
}

// 更新滚动条滑块位置
function updateThumbPosition() {
const scrollTop = -$content.position().top;
const thumbTop = (scrollTop / maxScrollTop) * maxThumbTop || 0;
$thumb.css('top', thumbTop);
}

// 鼠标滚轮事件
$container.on('wheel', function(e) {
e.preventDefault();
const delta = e.originalEvent.deltaY > 0 ? 30 : -30;
const newTop = $content.position().top - delta;

$content.css('top', Math.max(-maxScrollTop, Math.min(newTop, 0)));
updateThumbPosition();
});

// 拖动滚动条滑块
$thumb.on('mousedown', function(e) {
e.preventDefault();
isDragging = true;
startY = e.pageY;
startTop = parseInt($thumb.css('top')) || 0;

$(document).on('mousemove.scroll', function(e) {
if (!isDragging) return;

const deltaY = e.pageY - startY;
let newTop = startTop + deltaY;

newTop = Math.max(0, Math.min(newTop, maxThumbTop));
$thumb.css('top', newTop);

// 同步内容位置
const scrollTop = (newTop / maxThumbTop) * maxScrollTop;
$content.css('top', -scrollTop);
});

$(document).on('mouseup.scroll', function() {
isDragging = false;
$(document).off('.scroll');
});
});

// 点击滚动条轨道
$scrollBar.on('click', function(e) {
if (e.target === $scrollBar[0]) {
const clickY = e.pageY - $scrollBar.offset().top;
const thumbCenter = $thumb.height() / 2;
let thumbTop = clickY - thumbCenter;

thumbTop = Math.max(0, Math.min(thumbTop, maxThumbTop));
$thumb.css('top', thumbTop);

const scrollTop = (thumbTop / maxThumbTop) * maxScrollTop;
$content.css('top', -scrollTop);
}
});

// 初始化
initScrollbar();
$(window).on('resize', initScrollbar);

// 控制台输出信息
console.log('自定义滚动条功能已初始化');

});
</script>
</body>
</html>