html滚动条滚动时怎么显示提示_html滚动条滚动提示功能实现方法

<div id="scrollContainer" style="height: 200px; overflow-y: scroll; border: 1px solid #ccc;">
  <p>内容行 1</p>
  <p>内容行 2</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  <!-- 更多内容 -->
  <p>内容行 20</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1621">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680269562014.png" alt="JoinMC智能客服">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1621">JoinMC智能客服</a>
                            <p>JoinMC智能客服，帮您熬夜加班，7X24小时全天候智能回复用户消息，自动维护媒体主页，全平台渠道集成管理，电商物流平台一键绑定，让您出海轻松无忧！</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="JoinMC智能客服">
                                <span>193</span>
                            </div>
                        </div>
                        <a href="/ai/1621" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="JoinMC智能客服">
                        </a>
                    </div>
                
</div>
<p><div id="scrollTip" style="display: none; margin-top: 10px; padding: 8px; background: #000; color: #fff; font-size: 14px;">
已滚动到中间位置
</div></p>

<script>
const container = document.getElementById('scrollContainer');
const tip = document.getElementById('scrollTip');
<p>container.addEventListener('scroll', function () {
const scrollTop = container.scrollTop;
const scrollHeight = container.scrollHeight;
const clientHeight = container.clientHeight;</p><p>// 计算滚动比例
const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;</p><p>// 当滚动超过50%时显示提示
if (scrollPercent > 50 && scrollPercent < 90) {
tip.style.display = 'block';
} else {
tip.style.display = 'none';
}
});
</script></p>

if (scrollTop + clientHeight >= scrollHeight - 20) {
  tip.innerText = '已到达底部';
  tip.style.display = 'block';
}