JS实现的页面自定义滚动条效果可以通过手动改变元素的scrollTop属性来实现。以下是详细的实现步骤：
- 用HTML/CSS创建一个滚动条容器元素，例如div元素，并在其中嵌入另一个内容元素，例如ul/li列表等。可以使用自定义CSS样式来设置滚动条容器的样式。
<div class="scroll-container">
<ul class="scroll-content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<style>
.scroll-container {
width: 300px;
height: 200px;
overflow: auto;
position: relative;
}
.scroll-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
- 创建一个滚动条元素，并把它添加到滚动条容器元素中。可以使用自定义CSS样式来设置滚动条元素的样式。
<div class="scroll-container">
<ul class="scroll-content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div class="scroll-bar"></div>
</div>
<style>
.scroll-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.scroll-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.scroll-bar {
position: absolute;
right: 0;
top: 0;
width: 8px;
background-color: #ccc;
border-radius: 4px;
}
</style>
- 为滚动条元素添加鼠标拖拽事件监听器，使其能够随着鼠标拖拽的改变而在滚动条容器元素中滑动。
<div class="scroll-container">
<ul class="scroll-content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div class="scroll-bar"></div>
</div>
<style>
.scroll-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.scroll-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.scroll-bar {
position: absolute;
right: 0;
top: 0;
width: 8px;
background-color: #ccc;
border-radius: 4px;
}
</style>
<script>
var scrollContainer = document.querySelector('.scroll-container')
var scrollBar = document.querySelector('.scroll-bar')
var scrollContent = document.querySelector('.scroll-content')
// 为滚动条元素添加鼠标拖拽事件监听器
scrollBar.addEventListener('mousedown', function (e) {
// 计算鼠标相对于滚动条容器元素的位置
var clickY = e.clientY - scrollContainer.offsetTop - scrollBar.offsetTop
// 监听鼠标移动事件，计算滚动条元素的位置，并移到相应的位置上
document.addEventListener('mousemove', function (e) {
var posTop = e.clientY - scrollContainer.offsetTop - clickY
var maxTop = scrollContainer.clientHeight - scrollBar.clientHeight
posTop = Math.max(0, Math.min(posTop, maxTop))
scrollBar.style.top = posTop + 'px'
// 移动滚动条容器元素中的内容
var maxContentTop = scrollContent.scrollHeight - scrollContainer.clientHeight
var posContentTop = posTop / maxTop * maxContentTop
scrollContent.scrollTop = posContentTop
})
// 取消鼠标移动监听器，当鼠标松开后，不再移动滚动条元素
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove')
})
})
</script>
在实现过程中，需要注意以下几点：
- 滚动条容器元素必须设置为
overflow:hidden，以便隐藏滚动条本身 - 滚动条容器元素必须设置为
position:relative，滚动条元素可以基于它定位 - 滚动条元素必须设置为
position:absolute，以便它可以基于滚动条容器元素定位 - 滚动条元素、滚动条容器元素、内容元素之间的高度计算和比例计算必须准确
以下是完整的示例说明：
<!DOCTYPE html>
<html>
<head>
<title>JS实现的页面自定义滚动条效果</title>
<style>
.scroll-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.scroll-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.scroll-bar {
position: absolute;
right: 0;
top: 0;
width: 8px;
background-color: #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>JS实现的页面自定义滚动条效果</h1>
<div class="scroll-container">
<ul class="scroll-content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
</ul>
<div class="scroll-bar"></div>
</div>
<script>
var scrollContainer = document.querySelector('.scroll-container')
var scrollBar = document.querySelector('.scroll-bar')
var scrollContent = document.querySelector('.scroll-content')
scrollBar.addEventListener('mousedown', function (e) {
var clickY = e.clientY - scrollContainer.offsetTop - scrollBar.offsetTop
document.addEventListener('mousemove', function (e) {
var posTop = e.clientY - scrollContainer.offsetTop - clickY
var maxTop = scrollContainer.clientHeight - scrollBar.clientHeight
posTop = Math.max(0, Math.min(posTop, maxTop))
scrollBar.style.top = posTop + 'px'
var maxContentTop = scrollContent.scrollHeight - scrollContainer.clientHeight
var posContentTop = posTop / maxTop * maxContentTop
scrollContent.scrollTop = posContentTop
})
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove')
})
})
</script>
<h2>示例说明</h2>
<p>上述示例演示了如何使用JavaScript实现一个自定义的页面滚动条效果。滚动条容器元素使用`position:relative`定位，内容元素使用`position:absolute`定位，而滚动条元素则使用鼠标事件监听器来响应用户的交互，使用`scrollTop`属性来控制内容元素的滚动。通过CSS样式设置，可以创建美观的滚动条样式。</p>
<p>下面是另一个示例，在该示例中，滚动条的颜色和宽度全都是可以自定义的。</p>
<div class="scroll-container" style="width: 400px; height: 250px;">
<ul class="scroll-content" style="padding: 20px;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dignissim lectus, eget suscipit justo. Mauris rhoncus iaculis risus, hendrerit auctor nunc ultrices et. Vestibulum aliquet mollis tellus. Sed varius aliquam tellus, non pharetra leo aliquet id. Sed non tellus ac nisi viverra venenatis nec quis ex. Duis vulputate efficitur nibh sed posuere. Ut congue mi orci, vel placerat sapien ultrices eget. Cras in metus quis augue tempus dignissim in sit amet justo. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent laoreet egestas enim, at porttitor ante pulvinar eu.</li>
<li>Donec sagittis quam turpis, vel pharetra purus iaculis ac. Aliquam quis odio lobortis, iaculis ex in, mattis sapien. Maecenas vel odio sapien. In at posuere velit. Proin eget mauris in velit interdum finibus. Sed eget ex vel quam convallis lacinia sit amet in erat. Sed cursus tellus vitae facilisis varius. Sed molestie ligula sit amet vehicula blandit. Sed varius arcu quis velit ullamcorper, vitae semper tellus volutpat. Morbi congue ipsum turpis, non luctus erat lacinia ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu egestas quam. Phasellus justo tortor, rhoncus vel arcu nec, elementum ornare massa.</li>
<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tincidunt purus et ipsum feugiat, a dapibus neque viverra. Pellentesque eu massa ut leo tempor consectetur non ut velit. Vestibulum vel augue ex. Donec nec erat sed dui blandit convallis vel quis lorem. Ut eu metus ligula. Praesent sed est mollis, porttitor risus vel, convallis neque. Donec eu posuere nisl. Fusce aliquet nisl nec sapien efficitur vestibulum.</li>
<li>Donec bibendum, lorem eu lacinia consequat, tellus sapien sagittis sapien, eu aliquam metus quam in nulla. Suspendisse gravida est vel eros egestas placerat. Sed at purus faucibus lacus imperdiet accumsan. Sed ac rhoncus sem. In at elementum nulla. Fusce hendrerit varius ullamcorper. Donec dignissim gravida felis at interdum. Fusce congue, elit et venenatis facilisis, eros diam rhoncus libero, ac lobortis felis mauris non augue. Sed vel orci ut enim fringilla congue eget non nisl. Maecenas pulvinar ut purus sit amet porttitor. Mauris blandit odio id consectetur molestie. Morbi vitae magna eget augue scelerisque venenatis vel vel justo.</li>
<li>Ut bibendum efficitur neque, vel viverra purus ultricies in. Morbi pulvinar bibendum ante, vel fringilla velit lacinia at. Donec accumsan venenatis mauris quis condimentum. Aliquam tempor enim eget quam blandit bibendum eu eget nisi. Aenean non nulla ut lacus luctus commodo. Nam interdum facilisis augue vel pulvinar. Sed ullamcorper, eros ullamcorper lacinia sodales, nunc magna ullamcorper nunc, euismod pharetra turpis libero a mi. Donec accumsan dapibus elit, porttitor consectetur velit tincidunt eget.</li>
<li>Maecenas convallis enim erat, in mollis nisl sodales vitae. Phasellus massa sapien, semper a lacus id, vestibulum auctor tortor. Integer lectus est, lobortis vitae magna a, molestie ultrices risus. Quisque magna urna, placerat semper posuere a, interdum quis sapien. Vestibulum porta, nulla id pretium placerat, nibh ex finibus ipsum, vel finibus erat elit at diam. Nam eget ante facilisis, fringilla velit non, faucibus quam. In quis tellus ut justo vulputate tempor. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec ornare bibendum est ac tristique. Fusce nec cursus tortor. In hac habitasse platea dictumst. Nullam faucibus elit ut risus cursus imperdiet.</li>
<li>Sed malesuada quam ut sapien fermentum, non pharetra enim sagittis. Vivamus lacinia ac ante nec volutpat. Vivamus quis pulvinar mauris, et eleifend justo. Sed vel molestie lacus, eget pellentesque odio. Donec varius, neque ac rhoncus mattis, elit lacus suscipit nisl, eget tristique tortor justo sed odio. Nulla auctor nibh eget orci dictum, a feugiat sapien maximus. Sed quam erat, rhoncus vitae consectetur sit amet, dictum in tortor. Nunc bibendum ipsum bibendum dui varius aliquet. Praesent at efficitur urna. Donec ut interdum sapien. Nulla porttitor fringilla lorem, vel congue enim pharetra sed. Donec sagittis, odio eu ultricies ornare, enim purus aliquet neque, non imperdiet ex tortor pharetra mi. Nullam aliquam pellentesque nisl, malesuada eleifend tortor euismod vel.</li>
</ul>
<div class="scroll-bar" style="background-color: #0099cc; width: 16px;"></div>
</div>
<script>
var scrollContainer = document.querySelector('.scroll-container')
var scrollBar = document.querySelector('.scroll-bar')
var scrollContent = document.querySelector('.scroll-content')
scrollBar.addEventListener('mousedown', function (e) {
var clickY = e.clientY - scrollContainer.offsetTop - scrollBar.offsetTop
document.addEventListener('mousemove', function (e) {
var posTop = e.clientY - scrollContainer.offsetTop - clickY
var maxTop = scrollContainer.clientHeight - scrollBar.clientHeight
posTop = Math.max(0, Math.min(posTop, maxTop))
scrollBar.style.top = posTop + 'px'
var maxContentTop = scrollContent.scrollHeight - scrollContainer.clientHeight
var posContentTop = posTop / maxTop * maxContentTop
scrollContent.scrollTop = posContentTop
})
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove')
})
})
</script>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的页面自定义滚动条效果 - Python技术站
微信扫一扫 
支付宝扫一扫 