我有以下代码:
<div style="overflow: scroll; width: 75px; background-color: Black; ">
<table style="background-color: Red">
<tr>
<td>
<input type="button" id="btn1" value="1" />
</td>
<td>
<input type="button" id="Button1" value="2" />
</td>
<td>
<input type="button" id="Button2" value="3" />
</td>
</tr>
</table>
</div>
将禁用以下内容:
我怎么知道:
注意:建议使用JQuery。
答案 0 :(得分:1)
要选择按钮,请使用pseudo-selectors
:
$('input:button:visible')
$('input:button:hidden')
要知道元素的偏移量,请使用.offset()
方法。
var offset = $('input:button').offset();
// offset.top, offset.left
答案 1 :(得分:1)
试试这个:Check if element is visible after scrolling
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
答案 2 :(得分:1)
将容器的width()
(docs)和height()
(docs)与元素的position()
(docs)属性进行比较,同时考虑scrollTop()
(docs)和scrollLeft()
(docs)。
var container = $('#myContainer');
var w = container.width();
var h = container.height();
var el = $('#Button1');
var pos = el.position();
var el_h = el.height();
var el_w = el.width();
container.scroll(function() {
var st = container.scrollTop();
var sl = container.scrollLeft();
if ( pos.top < (h + st) &&
(pos.top + el_h) > st &&
pos.left < (w + sl) &&
(pos.left + el_w) > sl ) { console.log('visible'); }
});
编辑:修正了它,以便在滚动超出任一方向的元素时不会将其视为可见。
答案 3 :(得分:0)
使用jQuery,你可以使用每个按钮的position()函数来检查左边75px之后的那些 - 这意味着滚动隐藏了。 position()是你需要的,而不是offset(),因为你想知道DIV容器中的位置,而不是整个文档中的位置。
顺便说一句,如果你使用一张桌子只是让你的按钮在同一条线上,我建议将它们直接放在DIV中,空格分开,并添加白色空间:nowrap in the style。