我见过很多关于检测 HTML 元素是否可滚动的问题/答案（例如动态检测滚动条 https://stackoverflow.com/questions/33805052/detect-scrollbar-dynamically）。我需要类似的东西，但不完全相同。
我有一个 div 设置为overflow-y: scroll;。在桌面浏览器上它显示垂直滚动条；没关系。在 iPad 上，没有垂直滚动条；但您可以通过触摸滚动它。这problem我所遇到的是，它并不总是视觉上明显的在 iPad 上，div 可以滚动。 Div 仅包含一个列表；有时我的用户认为他们看到了整个列表，但没有意识到如果滚动还会有更多列表。
我在想如果我能以某种方式检测是否存在可见滚动条- 不仅仅是它是否可滚动 - 我可以为没有滚动条的移动用户添加背景图像或类似的视觉提示。但如果已经有滚动条，我不想要多余的提示。
我愿意使用 JavaScript/PHP 解决方案来检测滚动条，或者使用其他方式（CSS？）来“提示”某个部分可以滚动这一事实。有任何想法吗？
JS解决方案：
比较包裹内容的元素和列表本身的高度（offsetHeight 或 clientHeight）——然后相应地执行代码。
如果你想检测滚动条，这个 stackoverflow 答案可能会有所帮助：隐藏滚动条，但仍然可以滚动 https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll#answer-16671476
你可以在哪里做Element.offsetWidth - Element.clientWidth获取滚动条的宽度（如果没有滚动条，则应返回 0）。
这个 Stack Overflow 答案详细介绍了偏移量与客户端的关系：什么是offsetHeight、clientHeight、scrollHeight？ https://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight#answer-22675563
const listWrapper = document.getElementById('list-wrapper'),
container = document.getElementById('container'),
list = document.getElementById('list');
// compare the height of the target element ( listWrapper or list )
// against the element containing the element ( container )
if( list.offsetHeight > container.offsetHeight ){
// if the list is longer, add a class to the containing element
container.className = 'overflowed';
}
console.log( container.offsetHeight - container.clientHeight );
console.log( listWrapper.offsetHeight - listWrapper.clientHeight );
#container{ height: 150px; width: 150px; overflow-y: scroll; border: solid 1px red; }
#container.overflowed{
background: linear-gradient(transparent 85%, rgba(0,0,0,0.25) );
}
<div id="container">
<div id="list-wrapper">
<ul id="list">
<li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li><li>abcde</li>
</ul>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
