原生JS实现模拟滚动条,可以采用以下步骤:
步骤1:制作滚动条的HTML结构
在HTML中,需要设置滚动条容器和内容区域,其中内容区域可以设置固定高度,让内容超出内容区域,从而出现滚动条。
HTML结构示例代码如下:
<div class="scroll-box">
<div class="scroll-content" style="height: 200px;">
<!-- 填充内容 -->
</div>
<div class="scroll-bar">
<div class="scroll-thumb"></div>
</div>
</div>
在上述代码中,.scroll-box
是滚动条容器,.scroll-content
是内容区域,.scroll-bar
是滚动条,.scroll-thumb
是滚动条拖动块。
步骤2:制作滚动条的CSS样式
为了让滚动条实现滚动效果,需要设置.scroll-content
的overflow
属性为hidden
,将内容区域的滚动条隐藏。同时,需要设置.scroll-bar
和.scroll-thumb
的样式,使其能够模拟原生滚动条的外观和拖动效果。
CSS样式示例代码如下:
.scroll-box {
height: 200px;
width: 300px;
position: relative;
}
.scroll-content {
overflow: hidden;
}
.scroll-bar {
height: 100%;
width: 10px;
position: absolute;
top: 0;
right: 0;
background-color: #f1f1f1;
}
.scroll-thumb {
height: 50px;
width: 100%;
position: relative;
top: 0;
background-color: #888;
border-radius: 5px;
}
在上述代码中,.scroll-box
的高度和宽度是固定的,.scroll-content
的overflow
属性为hidden
,使得内容区域的滚动条隐藏。.scroll-bar
是滚动条,其宽度和位置是与容器的宽度和位置对应的。.scroll-thumb
是滚动条的拖动块,其高度是根据内容区域的高度和容器的高度进行计算得到的。
步骤3:实现滚动条的滚动效果
为了实现滚动条的滚动效果,需要为其添加事件监听器,当拖动滑块时,通过计算拖动块在滚动条容器中的位置,然后将内容区域的scrollTop
设置为相应的值,实现滚动条的滚动效果。
JavaScript示例代码如下:
var scrollBox = document.querySelector(".scroll-box");
var scrollContent = document.querySelector(".scroll-content");
var scrollBar = document.querySelector(".scroll-bar");
var scrollThumb = document.querySelector(".scroll-thumb");
function initScroll() {
var contentHeight = scrollContent.offsetHeight;
var boxHeight = scrollBox.offsetHeight;
var barHeight = boxHeight * boxHeight / contentHeight;
var thumbHeight = barHeight > 50 ? barHeight : 50;
scrollBar.style.height = barHeight + "px";
scrollThumb.style.height = thumbHeight + "px";
scrollThumb.addEventListener("mousedown", function(e) {
e.preventDefault();
var startY = e.clientY;
var startTop = this.offsetTop;
var barHeight = scrollBar.offsetHeight;
var thumbHeight = this.offsetHeight;
var maxTop = barHeight - thumbHeight;
var contentHeight = scrollContent.offsetHeight;
var boxHeight = scrollBox.offsetHeight;
document.addEventListener("mousemove", function(e) {
e.preventDefault();
var offsetY = e.clientY - startY;
var distance = offsetY + startTop;
var percentage = distance / maxTop;
var scrollTop = percentage * (contentHeight - boxHeight);
if (distance < 0) {
distance = 0;
}
if (distance > maxTop) {
distance = maxTop;
}
this.top = distance;
scrollContent.scrollTop = scrollTop;
});
});
document.addEventListener("mouseup", function(e) {
document.removeEventListener("mousemove");
});
}
initScroll();
在上述代码中,initScroll()
用于初始化滚动条,计算滚动条高度,根据计算得到的高度设置滚动条和拖动块的高度。.scroll-thumb
添加鼠标按下事件监听器,当拖动滑块时,通过计算拖动块在滚动条容器中的位置,然后将内容区域的scrollTop
设置为相应的值,实现滚动条的滚动效果。同时,需要添加鼠标松开事件监听器,取消鼠标移动事件监听器,确保只有在拖动时才会触发滚动效果。
示例1:垂直滚动条
下面给出一个垂直滚动条的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直滚动条示例</title>
<style>
.scroll-box {
height: 200px;
width: 300px;
position: relative;
}
.scroll-content {
overflow: hidden;
}
.scroll-bar {
height: 100%;
width: 10px;
position: absolute;
top: 0;
right: 0;
background-color: #f1f1f1;
}
.scroll-thumb {
height: 50px;
width: 100%;
position: relative;
top: 0;
background-color: #888;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="scroll-box">
<div class="scroll-content" style="height: 400px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at felis a magna malesuada placerat. Sed in nulla vel massa accumsan dapibus ut at nisl. Donec eget rutrum tortor. Praesent commodo, arcu at lacinia dictum, risus sapien varius elit, a rhoncus nunc metus ac nulla. Nullam a lacinia odio, a interdum lorem. Nulla ut ligula non quam vehicula lobortis. Phasellus viverra ante a enim blandit laoreet. Sed bibendum, arcu eu egestas luctus, ipsum magna volutpat sem, vitae ultrices ipsum diam a arcu. Suspendisse potenti. Donec id felis eget augue tempor sagittis.</p>
</div>
<div class="scroll-bar">
<div class="scroll-thumb"></div>
</div>
</div>
<script>
var scrollBox = document.querySelector(".scroll-box");
var scrollContent = document.querySelector(".scroll-content");
var scrollBar = document.querySelector(".scroll-bar");
var scrollThumb = document.querySelector(".scroll-thumb");
function initScroll() {
var contentHeight = scrollContent.offsetHeight;
var boxHeight = scrollBox.offsetHeight;
var barHeight = boxHeight * boxHeight / contentHeight;
var thumbHeight = barHeight > 50 ? barHeight : 50;
scrollBar.style.height = barHeight + "px";
scrollThumb.style.height = thumbHeight + "px";
scrollThumb.addEventListener("mousedown", function(e) {
e.preventDefault();
var startY = e.clientY;
var startTop = this.offsetTop;
var barHeight = scrollBar.offsetHeight;
var thumbHeight = this.offsetHeight;
var maxTop = barHeight - thumbHeight;
var contentHeight = scrollContent.offsetHeight;
var boxHeight = scrollBox.offsetHeight;
document.addEventListener("mousemove", function(e) {
e.preventDefault();
var offsetY = e.clientY - startY;
var distance = offsetY + startTop;
var percentage = distance / maxTop;
var scrollTop = percentage * (contentHeight - boxHeight);
if (distance < 0) {
distance = 0;
}
if (distance > maxTop) {
distance = maxTop;
}
this.top = distance;
scrollContent.scrollTop = scrollTop;
});
});
document.addEventListener("mouseup", function(e) {
document.removeEventListener("mousemove");
});
}
initScroll();
</script>
</body>
</html>
在上述代码中,设置内容区域的高度为400px,超出滚动条容器的高度200px,因此出现了垂直滚动条。
示例2:水平滚动条
下面给出一个水平滚动条的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平滚动条示例</title>
<style>
.scroll-box {
height: 200px;
width: 300px;
position: relative;
}
.scroll-content {
overflow: hidden;
white-space: nowrap;
}
.scroll-bar {
height: 10px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #f1f1f1;
}
.scroll-thumb {
height: 100%;
width: 50px;
position: absolute;
left: 0;
background-color: #888;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="scroll-box">
<div class="scroll-content" style="width: 600px;">
<p style="display: inline-block;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at felis a magna malesuada placerat. Sed in nulla vel massa accumsan dapibus ut at nisl. Donec eget rutrum tortor. Praesent commodo, arcu at lacinia dictum, risus sapien varius elit, a rhoncus nunc metus ac nulla. Nullam a lacinia odio, a interdum lorem. Nulla ut ligula non quam vehicula lobortis. Phasellus viverra ante a enim blandit laoreet. Sed bibendum, arcu eu egestas luctus, ipsum magna volutpat sem, vitae ultrices ipsum diam a arcu. Suspendisse potenti. Donec id felis eget augue tempor sagittis.</p>
</div>
<div class="scroll-bar">
<div class="scroll-thumb"></div>
</div>
</div>
<script>
var scrollBox = document.querySelector(".scroll-box");
var scrollContent = document.querySelector(".scroll-content");
var scrollBar = document.querySelector(".scroll-bar");
var scrollThumb = document.querySelector(".scroll-thumb");
function initScroll() {
var contentWidth = scrollContent.offsetWidth;
var boxWidth = scrollBox.offsetWidth;
var barWidth = boxWidth * boxWidth / contentWidth;
var thumbWidth = barWidth > 50 ? barWidth : 50;
scrollBar.style.width = barWidth + "px";
scrollThumb.style.width = thumbWidth + "px";
scrollThumb.addEventListener("mousedown", function(e) {
e.preventDefault();
var startX = e.clientX;
var startLeft = this.offsetLeft;
var barWidth = scrollBar.offsetWidth;
var thumbWidth = this.offsetWidth;
var maxLeft = barWidth - thumbWidth;
var contentWidth = scrollContent.offsetWidth;
var boxWidth = scrollBox.offsetWidth;
document.addEventListener("mousemove", function(e) {
e.preventDefault();
var offsetX = e.clientX - startX;
var distance = offsetX + startLeft;
var percentage = distance / maxLeft;
var scrollLeft = percentage * (contentWidth - boxWidth);
if (distance < 0) {
distance = 0;
}
if (distance > maxLeft) {
distance = maxLeft;
}
this.left = distance;
scrollContent.scrollLeft = scrollLeft;
});
});
document.addEventListener("mouseup", function(e) {
document.removeEventListener("mousemove");
});
}
initScroll();
</script>
</body>
</html>
在上述代码中,设置了.scroll-content
的white-space
属性为nowrap
,让文本不自动换行,从而撑满了整个.scroll-box
。设置了.scroll-bar
和.scroll-thumb
的高度和宽度为10px和50px,使其可以模拟水平滚动条的效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js实现模拟滚动条 - Python技术站