Question

我有一个简单的div。当浏览器（Firefox版本26）窗口缩小时，div的可视区域部分不可见。

我需要找出特定位置（div的右边缘，，例如）何时可见。

令我惊讶的是，以下产生一个空值 - 没有字符串，没有矩形，没有。无法弄清楚为什么。我看到的文档和示例表明style.clip应该返回一个字符串，其中包含剪切rect的元素可见部分的顶部，右侧，底部，左侧值。

例如，甚至是W3schools.com shows that。

这是我的代码。

 window.onresize = function(event) 
 {
   console.log("Hi, we're about to get the clip rect for myDiv.");
   console.log("myDiv clip rect is: " + document.getElementById('myDiv').style.clip);
 }


   <div id="myDiv" style="height: 99%; display: inline-block; width: 99%;
             background-color: red"></div>

我可以看到div（红色背景）。但myDiv的style.clip是空，没有字符串，没有。我的“！DOCTYPE html”位于页面顶部。无法解决这个问题，虽然可能很简单。

有什么想法吗？顺便说一句：这里不会使用任何javascript库，只是纯粹的自然javascript。

Answer 1

问题在于，当缩小浏览器窗口的宽度时，即使出现浏览器窗口的水平滚动条，向右滚动也会产生一个空白区域，即使有数据存在。我通过设置div的硬编码宽度来解决这个问题 - 也发现我可以通过编程方式增加div的宽度，因为'scrollWidth'增加了 - 两种方法都有效。

style.clip是空的 - 需要知道div的一部分是否可见

1 个答案: