要素が画面から突き出るのを防ぐ方法を教えてください。

Question

座標（単位：％）がAjaxで把握されている「絶対配置された」要素がいくつかあるとします。

時には、画面の右端または上端のように、ある特定の端が画面からはみ出すことがあります。彼らの親要素はすでに "絶対的に配置されている"ため、right: 0として配置することはできません。そのため動作しません。

直接親要素がdocument.bodyでない場合、どのようにして要素が画面からはみ出すことを防ぐことができますか？

Answer 1

bodyのCSSプロパティoverflow: hiddenを試しましたか？たとえば：

.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