正文

图片滚动条制作教程：用原生JS实现图片滚动效果，轻松应对长图展示

/0 浏览量
0509

引言

在网页设计中，长图片的展示是一个常见的需求。为了提高用户体验，我们可以通过添加滚动条来让用户能够方便地查看图片的全部内容。本文将使用原生JavaScript（JS）来实现一个简单的图片滚动效果，帮助您轻松应对长图展示的需求。

准备工作

在开始之前，请确保您已经具备了以下条件：

  • 熟悉HTML、CSS和JavaScript的基本知识。
  • 准备一张需要展示的长图片。

步骤一：HTML结构

首先，我们需要创建一个HTML文件，并在其中定义一个容器用于展示图片，以及一个滚动条用于控制图片的滚动。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片滚动条制作教程</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="long-image.jpg" alt="长图片" class="long-image">
        <div class="scroll-bar">
            <div class="progress"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

步骤二：CSS样式

接下来，我们需要为图片和滚动条添加一些基本的样式。

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container {
    position: relative;
    width: 100%;
    height: 500px;
}

.long-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scroll-bar {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 10px;
    height: 80px;
    background-color: #ccc;
    cursor: pointer;
}

.progress {
    width: 100%;
    height: 100%;
    background-color: #000;
}

步骤三：JavaScript实现

最后，我们需要编写JavaScript代码来控制图片的滚动。

const container = document.querySelector('.container');
const longImage = document.querySelector('.long-image');
const scrollBar = document.querySelector('.scroll-bar');
const progress = document.querySelector('.progress');

let isDragging = false;
let offset = 0;

container.addEventListener('mousedown', (e) => {
    isDragging = true;
    offset = e.clientY - container.offsetTop;
});

document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        const newOffset = e.clientY - offset;
        if (newOffset < 0) {
            newOffset = 0;
        }
        if (newOffset > container.clientHeight - scrollBar.clientHeight) {
            newOffset = container.clientHeight - scrollBar.clientHeight;
        }
        scrollBar.style.top = newOffset + 'px';
        longImage.style.top = -newOffset + 'px';
    }
});

document.addEventListener('mouseup', () => {
    isDragging = false;
});

总结

通过以上步骤，我们成功地使用原生JavaScript实现了一个简单的图片滚动效果。在实际应用中，您可以根据需求对代码进行修改和优化，例如添加动画效果、调整滚动速度等。希望这篇文章能对您有所帮助！

-- 展开阅读全文 --