我有这种情况需要将元素滚动到视口中.问题是我不知道哪个元素是可滚动的.例如,在Portrait中,body是可滚动的,而在Landscape中它是另一个元素(并且有更多情况可以改变可滚动元素)
现在的问题是,给定一个需要滚动到视口中的元素,找到第一个可滚动父级的最佳方法是什么？
我在这里设置了一个演示.使用按钮,您可以在两种不同的情况之间切换
<div class="outer">
<div class="inner">
<div class="content">
...
<span>Scroll me into view</span>
</div>
</div>
</div>
身体是可滚动的或 .outer
有什么建议 ？
请考虑以下网页:
<html>
<body onscroll="alert('body scroll event')">
<div style='width:200px;height:200px;overflow:auto' onscroll="alert('div scroll event')">
<div style='height:400px'>
</div>
</div>
</body>
</html>
这个html创建一个带滚动条的div.如果移动滚动条,则会触发div元素上的"onscroll"事件.但是,身体上的"onscroll"事件不会被触发.这是预期的,因为W3C声明元素onscroll事件不会"冒泡".
但是,我正在开发一个客户端Web框架,只要滚动页面的任何元素上的滚动条,就需要知道它.如果"onscroll"冒泡,这很容易做到,但不幸的是,它没有.有没有其他方法可以检测整个页面上的onscroll事件？(现在我主要关注Webkit,所以特定于Webkit的解决方案会很好......)
以下是我尝试过的一些事情:1.捕获DOMAttrModified(似乎不会触发移动滚动条.)2.使用DOM Observers(似乎也不会触发滚动条)3.更改"onscroll"事件类型泡沫(似乎不可能)
似乎全局捕获onscroll事件的唯一方法是将onscroll事件附加到可能滚动的每个元素,这非常难看并且会损害我的框架的性能.
谁知道更好的方法？
提前致谢!