DIV随滚动条滚动而滚动的实现代码【推荐】

这里给您详细讲解一下DIV随滚动条滚动而滚动的实现代码的完整攻略。

1. 安装jQuery插件

实现DIV随滚动条滚动而滚动，需要使用jQuery插件。如果您还没有安装jQuery插件，请先进行安装。

在HTML文件中插入jQuery插件的链接：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2. 编写CSS样式

这里我们设置一个样式 class="scroll"，用于限定需要实现 DIV 随滚动条滚动而滚动的区域。

.scroll{
    height:300px;
    overflow-y:scroll;
}

其中，height 属性控制了区域的高度（本例中高度为 300px），overflow-y 属性控制了当内容超出区域高度时的滚动条样式。

3. 编写JavaScript代码

在网页中插入如下代码：

$(document).ready(function(){
    $(".scroll").scroll(function(){
        $(".scroll").scrollLeft($(this).scrollLeft());
    });
});

这里使用了Jquery的scroll方法，当发现页面中的元素发生滚动时，将scrollLeft值赋值给所有 class 为“scroll”的元素，以实现DIV随滚动条滚动而滚动。

示例

示例1

在页面中添加如下HTML代码：

<div class="scroll">
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
    </table>
</div>

上述代码中，我们在 DIV 中添加了一个表格。

运行代码后，可以看到 DIV 元素在滚动时，表格中的内容也随之滚动。

示例2

在页面中添加如下HTML代码：

<div class="scroll">
    <p>这是一段测试文本。这是一段测试文本。这是一段测试文本。这是一段测试文本。</p>
</div>

上述代码中，我们在 DIV 中添加了一个段落。

运行代码后，可以看到 DIV 元素在滚动时，段落中的文本也随之滚动。

最后，这就是DIV随滚动条滚动而滚动的实现代码攻略了。