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

<div id="scrollContainer" style="height: 200px; overflow-y: scroll; border: 1px solid #ccc;">
  <p>内容行 1</p>
  <p>内容行 2</p>
  <!-- 更多内容 -->
  <p>内容行 20</p>
</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';
}