Макет выглядит следующим образом:
В основном все, что я хочу, это выяснить, вышел ли ELEMENT вне PAGE:)
Все, что я знаю, это ширина страницы, которая фиксирована @900 px...
Макет выглядит следующим образом:
В основном все, что я хочу, это выяснить, вышел ли ELEMENT вне PAGE:)
Все, что я знаю, это ширина страницы, которая фиксирована @900 px...
Вычислите элемент width
, затем получите его left
, и, наконец, вычтите его на страницу width
, и вы получите переполнение.
var pageWidth = $(".page").width();
var elementWidth = $(".element").width();
var elementLeft = $(".element").position().left;
if (pageWidth - (elementWidth + elementLeft) < 0) {
alert("overflow!");
} else {
alert("doesn't overflow");
}
.page {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
background: black;
}
.element {
width: 100px;
height: 100px;
position: absolute;
background: blue;
top: 10px;
left: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="element">
</div>
</div>
Предполагая, что у вас есть <div id="elem"></div>
на вашей странице, вы можете узнать, находится ли она вне области просмотра, например:
var $elem = $('#elem'),
top = $elem.offset().top,
left = $elem.offset().left,
width = $elem.width(),
height = $elem.height();
if (left + width > $(window).width()) {
alert('Off page to the right');
}
if (top + height > $(window).height()) {
alert('Off page to the bottom');
}
Вы пытались использовать CSS, чтобы предотвратить его?
pre { word-wrap:break-word; }
Для итерации каждого элемента на странице кажется чрезмерным, и это займет некоторое время на загруженной странице. Это возможно, но не совсем практично.
Все ответы здесь не проверены, если элемент находится в top: negative value
или left: negative value
.
Итак, почему, я даю более правильный или точный ответ здесь.
var pageWidth = $(".page").width();
var pageHeight = $(".page").height();
var pageTop = $(".page").offset().top;
var pageLeft = $(".page").offset().left;
var elementWidth = $(".element").width();
var elementHeight = $(".element").height();
var elementTop = $(".element").offset().top;
var elementLeft = $(".element").offset().left;
if ((elementLeft >= pageLeft) && (elementTop >= pageTop) && (elementLeft + elementWidth <= pageLeft + pageWidth) && (elementTop + elementHeight <= pageTop + pageHeight)) {
// Its inside
alert('Inside');
} else {
//
alert('Outside');
}
.page {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
background: black;
}
.element {
width: 100px;
height: 100px;
position: absolute;
background: blue;
top: -10px;
left: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="page">
<div class="element">
</div>
</div>