自适应80vh高度的垂直循环Marquee文本重叠问题求助

我开发的垂直循环Marquee在父div设置固定高度时运行良好，但将父容器高度改为80vh实现响应式布局后，出现文本提前显示、重叠且顺序混乱的问题。推测问题源于top属性使用固定值100而非百分比，但不清楚具体修正方法。为展示重叠和间距问题，给文本添加了编号和边框。

修复方案 #

问题根源 #

代码中所有元素的高度、位移步长、初始定位都使用了固定的100px值，当父容器改为80vh的响应式高度后，元素的定位逻辑无法适配容器高度变化，导致位置计算错误，引发重叠、顺序混乱等问题。

修正思路 #

• 动态获取单个<li>元素的实际高度，替代固定的100px值
• 初始化时根据元素实际高度设置每个<li>的初始top位置
• 滚动逻辑中，以元素实际高度作为每次滚动的步长，以及元素重置位置的判断阈值

修正后的代码 #

JavaScript

window.verticalScroller = function($elem) {
    const itemHeight = $('.js-cycle-list > li').height();
    let top = parseInt($elem.css("top"));
    const temp = -1 * itemHeight;
    
    if(top < temp) {
        top = $('.js-cycle-list').height();
        $elem.css("top", top);
    }
    
    $elem.animate({ top: (top - itemHeight) }, 600, 'linear', function () {
        window.verticalScroller($(this));
    });
}

$(document).ready(function() {
    const itemHeight = $('.js-cycle-list > li').height();
    let i = 0;
    
    $(".js-cycle-list > li").each(function () {
        $(this).css("top", i);
        i += itemHeight;
        window.verticalScroller($(this));
    });
});

CSS

.cycle-text {
    height: 80vh;
    width: 100%;
    overflow: hidden;
    background: white;
}

.cycle__list {
    position: relative;
    width: 100%;
    height: 80vh;
    border: 1px solid red;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cycle__list li {
    position: absolute;
    width: 100%;
    height: 100px; /* 若需要响应式高度，可改为如10vh，保持和JS逻辑联动 */
    border: 1px solid blue;
    overflow: hidden;
}

.cycle__list li p {
    color: #f40000;
    font-family: Arial;
    font-size: 80px;
    line-height: 100px;
    text-align: right;
    padding: 0;
    margin: 0;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="cycle-text">
    <ul class="cycle__list js-cycle-list o-pd-top-md o-pd-btm-md">
        <li>
            <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>5. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>6. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>7. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>8. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>9. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>10. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>11. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>12. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>13. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>14. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>15. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>16. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>17. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>18. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>19. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>20. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>21. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>22. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>23. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>24. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>25. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>26. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>27. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>28. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>29. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
        <li>
            <p>30. Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </li>
    </ul>
</section>

额外优化建议 #

如果需要让<li>元素高度也随视口响应，可将CSS中.cycle__list li的height:100px改为height:10vh，同时确保JS中动态获取高度的逻辑依然生效，这样整个滚动组件会完全适配视口变化。

内容的提问来源于stack exchange，提问作者probablybest