###実行したいこと
デフォルトで長いコンテンツの一部を非表示にして、
クリックイベントを取得した際に、コンテンツ全体を表示させようとしております。
###行ったこと
html
1<html> 2 <head> 3 </head> 4 <body> 5 <section class="block"> 6 <div class="block__element"> 7 <div class="block__elementArea"> 8 <p>ここにコンテンツが入ります。</p> 9 <p>ここにコンテンツが入ります。</p> 10 <p>ここにコンテンツが入ります。</p> 11 <p>ここにコンテンツが入ります。</p> 12 <p>ここにコンテンツが入ります。</p> 13 </div> 14 </div> 15 </section> 16 <section class="block"> 17 <div class="block__elementArea"> 18 <div class=""> 19 <p>ここにコンテンツが入ります。</p> 20 <p>ここにコンテンツが入ります。</p> 21 <p>ここにコンテンツが入ります。</p> 22 <p>ここにコンテンツが入ります。</p> 23 <p>ここにコンテンツが入ります。</p> 24 </div> 25 </div> 26 </section> 27 </body> 28</html>
Javascript
1$(function(){ 2 $('.block > .block__element').each(function(){ 3 var $target = $(this); 4 var $h = $target.height(); 5 if ($h > 100) { 6 $target.addClass('hidden block__elementArea'); 7 $target.append( 8 '<a class="clickArea clickArea--before j-areaToggle"></a>' 9 ); 10 $target.find('.j-areaToggle').on('click', function(){ 11 var $position = $target.offset().top - 80; 12 var $scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html'; 13 $target.toggleClass('hidden'); 14 $target.find('.clickArea').toggleClass('clickArea--before'); 15 $target.find('.clickArea').toggleClass('clickArea--after'); 16 $($scrollTag).animate({scrollTop: $position}, 200); 17 return false; 18 }); 19 } 20 }); 21}); 22
###問題
一部の環境で.block__elementのoffsetの値がうまく取得できない。
具体的には、クリックイベントを実行するたびに、$position
の値が変化してしまいます。
###環境
- ブラウザ:chrome
- デバイス:SP(android)
※ブラウザがsafariの場合、デバイスがPCの場合は、正常に$position
を取得できております。
初めての質問で至らない点があると思いますが、ご教授お願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/09 06:21
2016/07/20 05:59