javascript是否可以检测到滚动条何时不可用(即在移动浏览器上)?

问题描述

我有一个基于JavaScript的滚动小部件Thingy™.它要做的一件事是创建一个固定的高度div并将其赋予overflow: auto.

I've got a javascript-based Scrolling Widget Thingy™. One of the things it does is create a fixed height div and gives it overflow: auto.

可惜在移动Safari(和其他移动浏览器)上overflow: auto;没有显示滚动条.褶皱以下的任何内容只能偶然发现.

Alas on mobile Safari (and other mobile browsers) overflow: auto; doesn't show a scrollbar. Any content below "the fold" can only be found by accident.

有没有一种方法可以在javascript中检测到此问题，而无需使用浏览器检测来?例如

Is there a way to detect this in javascript, without resorting to browser detection? e.g.

if (there is a scrollbar) {
    /* give me a fixed height and a scrollbar */
} else {
    /* Do something more suited to this situation */
}

推荐答案

我只能想到诉诸肮脏的把戏:

I can only think of resorting to dirty tricks:

1. 创建50x50的框
2. 将框设置为overflow: auto
3. 带有文本的洪水框
4. 读取框的内部尺寸:如果是50x50，则出了点问题
5. 将结果存储在变量中并销毁框

1. Create 50x50 box
2. Set box to overflow: auto
3. Flood box with text
4. Read box inner size: if 50x50, something went wrong
5. Store result in variable and destroy box

...鉴于实际上有一种方法可以测量内部尺寸，但不包括滚动条.

... given that there's actually a way to measure the inner size, scrollbar excluded.

无论如何，这是一个令人恐惧的算法，成百上千的事情可能会出错...认为这只是一个主意.

It's a scary algorithm anyway, hundreds of things can go wrong... Consider it just an idea.

这篇关于javascript是否可以检测到滚动条何时不可用(即在移动浏览器上)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！