Javascript 检测滚动条是否可见（例如，在移动设备上）

我已经看到了很多关于检测HTML元素是否可滚动的问题/答案（例如）。我需要类似的东西，但不完全一样

我将div设置为

overflow-y:scroll。在桌面浏览器上，它显示垂直滚动条；那很好。在iPad上，没有垂直滚动条；但您可以通过触摸滚动它。我遇到的问题是，在iPad上，div可以滚动的视觉效果并不总是很明显。Div只包含一个列表；有时，我的用户认为他们看到了整个列表，但如果他们滚动，他们没有意识到还有更多

我在想，如果我能以某种方式检测到是否有一个可见的滚动条，而不仅仅是它是否可滚动，我可以为没有滚动条的移动用户添加一个背景图像或类似的视觉提示。但是如果已经有一个滚动条，我不想要多余的提示

我愿意使用JavaScript/PHP解决方案来检测滚动条，或者使用其他方式（CSS？）来“提示”可以滚动一个部分。有什么想法吗？
JS解决方案：
比较包装内容的元素的高度（offsetHeight或clientHeight）和列表本身——然后相应地执行代码

如果要检测滚动条，此stackoverflow回答可能会有帮助：

您可以在其中执行
Element.offsetWidth-Element.clientWidth
以获取滚动条的宽度（如果没有滚动条，则应返回0）

此堆栈溢出回答详细介绍了偏移量与客户端：


const listWrapper=document.getElementById（'list-wrapper'），
container=document.getElementById（'container'），
list=document.getElementById（'list'）；
//比较目标元素（listWrapper或list）的高度
//针对包含元素（容器）的元素
如果（list.offsetHeight>container.offsetHeight）{
//如果列表较长，请向包含的元素添加一个类
container.className='溢出'；
}
console.log（container.offsetHeight-container.clientHeight）；
log（listWrapper.offsetHeight-listWrapper.clientHeight）
#容器{高度：150px；宽度：150px；溢出-y：滚动；边框：实心1px红色；}
#集装箱溢油{
背景：线性梯度（透明85%，rgba（0,0,0,0.25））；
}


“li
abcdeabcdeliABCDCDE<ABCDCDCDE
abcde
abcde
abcde
abcde
abcde
abcde
abcde
abcde
abcde
abcde
abcde


根据Doug关于比较偏移网络的提示，我提出了一个可行的解决方案。带有
vscroll
类的元素的样式为
overflow-y:scroll

$(document).ready(function () {
    var scrollables = document.getElementsByClassName('vscroll');
    if( scrollables.length && 0 === scrollables[0].offsetWidth - scrollables[0].clientWidth ) {
        for ( const scrollable of scrollables ) {
            scrollable.style.background = 'url("/images/updnarrows_75.png") no-repeat 60% 50%';
        }
    }
});

该图像是一组褪色的上/下箭头，显示在div背景的中心。
您可以尝试一下，但我自己还没有测试过。这个答案表明
Element.offsetWidth-Element.clientWidth
将返回滚动条的尺寸（如果没有滚动条，则返回0）。我不明白人们为什么投票关闭这个问题。以前没有人问过它，在回复和评论中有非常有用的信息。这是否回答了你的问题？我不认为这是他想要实现的。这将允许您在元素溢出时使用不同的样式，但他试图检测用户的浏览器是否隐藏了scrollbar.hmm。。。是的，如果内容溢出，这只会给出一个视觉提示。知道滚动条是否可见实际上取决于浏览器+设备规格。据我所知，这只是研究——不是可以编码预测的东西。这告诉我它是否可滚动，但不是特定的客户端（浏览器）是否真的显示滚动条。不幸的是，我认为这可能归结为研究——我得到了chrome+mac中现有滚动条的尺寸——但没有一个是容易看到的。在最坏的情况下，如果你不考虑风格路线，这将是一个额外的视觉线索，而不是冒没有视觉线索的风险。