检测滚动条是否可见(例如,在移动设备上)

时间:2018-03-15 17:04:01

标签: javascript html css

我已经看到很多关于检测HTML元素是否可滚动的问题/答案(例如Detect scrollbar dynamically)。我需要类似的东西,但不太一样。

我将div设置为overflow-y: scroll;。在桌面浏览器上,它显示垂直滚动条;没关系。在iPad上,没有垂直滚动条;但你可以通过触摸滚动它。我遇到的问题是在iPad上并不总是视觉上明显的可以滚动div。 Div只包含一个列表;有时我的用户认为他们正在查看整个列表,如果他们滚动则没有意识到还有更多。

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

我打开JavaScript / PHP解决方案以检测滚动条,或其他方式(CSS?)“提示”可以滚动节的事实。有什么想法吗?

2 个答案:

答案 0 :(得分:1)

JS解决方案: 比较包装内容的元素的高度(offsetHeight或clientHeight)和列表本身 - 然后相应地执行代码。

如果要检测滚动条,此stackoverflow答案可能会有所帮助: Hide scroll bar, but while still being able to scroll

您可以Element.offsetWidth - Element.clientWidth获取滚动条的宽度(如果没有滚动条,则应返回0)。

此Stack Overflow回答详细介绍了偏移量与客户端的关系: What is offsetHeight, clientHeight, scrollHeight?

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>

答案 1 :(得分:0)

根据Doug关于比较offsetWidths的提示,这是我提出的一个可行的解决方案。 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的背景为中心。