2017-05-31 21 views
0

これは、従来の文書には相対的に配置されたdiv内に絶対的に配置された要素がいくつかあるという奇妙な場合があります。これらの要素は、leftのcss属性に負の値を持ちます。相対配置されたdiv内に絶対配置された要素までスクロール

.container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

.element { 
    width: 100px; 
    height: 100px; 
    background: red; 
} 

今二つの質問:

  1. が負位置付け要素をスクロールして表示するように設定containerにそれは可能ですか?

  2. もしそうでない場合は、残りの要素がそれに応じてシフトするように、どのように負の要素を修正する必要がありますか?ここで

例JSBinです:http://jsbin.com/xolifotiku/edit?html,css,output

+0

達成しようとしていることの詳細を説明できますか?いくつかのダミーのレイアウト画像かもしれません。 – maximelian1986

+0

@ maximelian1986私はjsbinの例を追加しました。うまくいけば助けになるでしょう。 – Obaid

答えて

0

あなたはそのようなことを意味していますか?

$(document).ready(function() { 
 
    $('html, body').animate({ 
 
    scrollTop: $('.element').offset().top 
 
    }, 2000); 
 
});
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 500px; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 50px 20px 20px 20px; 
 
} 
 
.element { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: -20px; 
 
    left: 0px; 
 
    background: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="element"></div> 
 
</div>

0

これは私が...

$(document).ready(function() { 
 
    $('html, body').animate({ 
 
    scrollLeft: $('.element').offset().left 
 
    }, 2000); 
 
});
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 500px; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 50px 20px 20px 20px; 
 
} 
 
.element { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: -20px; 
 
    left: -100px; 
 
    background: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="element"></div> 
 
</div>

$(document).ready(function() { 
 
    $('html, body').animate({ 
 
    scrollTop: $('.element').offset().top 
 
    }, 2000); 
 
});
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 500px; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 50px 20px 20px 20px; 
 
} 
 
.element { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: -20px; 
 
    left: 0px; 
 
    background: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="element"></div> 
 
</div>
取り扱っておりますシナリオに、より近いです

関連する問題