2016-04-06 10 views
4

私はN個の要素を含むスライダを持っています。ユーザーが次のボタンをクリックすると、各要素はNピクセルで翻訳されます。要素がラッパーdivから外れると、要素が他の要素によってオーバーフローして消えます。私の要素がオーバーフローしているかどうかを知る方法

私のプラグインはマージンを使用せず、トランスフォームプロパティのみを使用します。

私の要素がdivの外にあるかどうかを知る方法があるかどうかを知りたいと思います。 :要素が既に表示されていてオーバーフローしているため、visibleは自分の問題では機能しません。

+2

あなたはフィドルやデモを表示できますか? – Zafta

+0

隠し要素に追加されているクラスがあるかどうかを確認できます。 –

+0

残念ながら、隠し要素にはクラスが追加されません。 Flickityプラグインで唯一の問題です。 –

答えて

1

私が正しく理解していれば、この要素の位置を親のサイズ(幅/高さまたはその両方)と比較することができます。それはあなたがして、好ましくは、オフセットのjQueryを使用することにより、正しいdiv要素の幅に位置を比較するには、このコードを適応させることができ、親が(ない場合は

<script> 
    //This is the position of the right side of the element 
    //relative to his parent 
    var rightPos = $("#element").position().left + $("#element").width(); 
    //And bottom side 
    var botPos = $("#element").position().top + $("#element").height(); 
    if (rightPos > $("#element").parent().width()) { 
    //The element is outside the right limit of the the parent block 
    } else if (botPos > $("#element").parent.height()) { 
    //It's outside the bottom limit of the parent block 
    } 
</script> 

はjQueryを使って、あなたは、このようにそれを行うことができます)メソッドの代わりにposition()を使用します。

+0

これは、要素を移動する "翻訳X"を使用するスライダで動作するかわからないです。 – dimshik

0

あなたは、オーバーフローのCSSプロパティのdivラッパーを与えることができる:隠された

をこれは、彼らがラッパーの境界を離れるときにその中のいずれかの要素が表示されていないことを意味します。

そうでなければ、要素がラッパーdivの外側にあるかどうかをjQueryを使って調べて、親の位置と位置を比較することができます。 parentwidthを決定し、あなたの質問は、あなたのhtmlで更新した場合、私はあなたのコードを更新することができif condition

if($('span').width() > divWidth){ 
alert('Overflowed!'); 
// do something! 
} 

jsFiddle Demo

を使用し、その後childwidthを取得することで

+0

はい、ラッパーにはプロパティが含まれています。ラッパーが要素をオーバーフローさせてその上で何らかの処理を行うかどうかを知る必要があります。編集:私はこれを試してみます –

0

要素が画面に表示されているかどうかをテストする優れたツールがあります。

Detect if a DOM Element is Truly Visible

これは、オブジェクトを見て、それがまだユーザーに見えるのですかどうかを確認するために、その両親のそれぞれをチェックします。

関連する問題