原生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技术站
微信扫一扫 
支付宝扫一扫 