Как предотвратить появление элемента из экрана?

Question

Скажем, есть некоторые «абсолютно позиционированные» элементы, координаты которых (единица:%) захватываются с помощью Ajax.

Иногда некоторые из них торчат из экрана, например, когда они слишком правы или слишком сверху. Я не могу позиционировать их как right: 0, потому что их родительский элемент уже «абсолютно позиционирован», следовательно, это не сработает.

Как можно предотвратить элемент, когда-либо торчащий из экрана, поскольку его прямой родительский элемент не является document.body?

Answer 1

Вы пытались использовать свойство css overflow: hidden на body? Например:

.box { 
 
    border: 1px solid #222; 
 
    width: 300px; 
 
    height: 300px; 
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
}

<div class="box"> 
 
    <img src="http://placehold.it/450x150" alt="" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p> 
 
</div>

Если вы хотите содержание, чтобы никогда не двигаться из диапазона тела, вы должны захватить позицию относительно этого элемента к окну и не позволить ему перемещаться за пределы его границ (например, положение любого элемента left относительно тела не должно превышать windowWidth-currentElementWidth). Вы можете найти более подробную информацию об этом here