列表无限滚动---百分比高度和固定高度两种不同情况

最新推荐文章于 2023-03-13 15:48:04 发布

原创

最新推荐文章于 2023-03-13 15:48:04 发布 · 820 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#列表无限滚动

本文探讨了在项目中遇到的列表无限滚动问题，特别是在容器宽高使用百分比的情况下。文中列举了两个实例：1) 使用p标签作为列表行，通过调整overflow属性观察滚动变化；2) 使用div做列表行，解决因div无默认margin导致的滚动问题，确保容器最大高度不超过内容高度。此外，还提到高度为百分比时可能出现的重叠问题及解决方法，即设置合适的margin-top值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目遇到要实现一个列表无限滚动的问题，在网上搜索了很多都只有固定高度的例子，但项目中的容器宽高都是使用百分比的，琢磨了下总结出下面几个实例。

1.使用p标签做列表行，代码中把overflow设置为auto可以更清晰看到滚动的变化，不需要滚动时可以设置为hidden

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表之无限滚动</title>
    <style>
        #rule{
            max-height: 400px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id="rule">
        <div class="list" id="list">
            <p>用户185****0000 获得XXX优惠券1</p>
            <p>用户185****0000 获得XXX优惠券2</p>
            <p>用户185****0000 获得XXX优惠券3</p>
            <p>用户185****0000 获得XXX优惠券4</p>
            <p>用户185****0000 获得XXX优惠券5</p>
            <p>用户185****0000 获得XXX优惠券6</p>
            <p>用户185****0000 获得XXX优惠券7</p>
            <p>用户185****0000 获得XXX优惠券8</p>
            <p>用户185****0000 获得XXX优惠券9</p>
            <p>用户185****0000 获得XXX优惠券10</p>
            <p>用户185****0000 获得XXX优惠券11</p>
            <p>用户185****0000 获得XXX优惠券12</p>
        </div>
        <div class="list2" id="list2"></div>
    </div>
    <script>
        (function(){
            var speed = 50;
            var list = document.getElementById('list');
            var list2 = document.getElementById('list2');
            var rule = document.getElementB