スクロール終了時に通知ができるjQuery処理の実装方法

前へ 次へ
このQ&Aのポイント
  • PCでは正常に動作するものの、タブレット端末（Nexus7）では正常に判定が行われず困っています。
  • jQueryを使用してページのスクロール位置を取得し、スクロール終了時に通知する処理を実装しました。
  • PCでは問題なく動作していますが、タブレット端末での動作に問題があります。タブレット端末では値の取り方が異なるのか、正常に判定が行われません。どのように改善すればよいでしょうか？
回答を見る
  • ベストアンサー

最後までスクロールしたら通知。

ページの最後までスクロールしたら、次のページを読み込む、というようなことを やりたいと思っています。 調べたところ、jQueryを使えばできそうでしたので、以下処理を入れました。 var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { //次の処理 } PCで見る限りは問題ないのですが、タブレット端末（Nexus7で確認できました）で 見たところ、判定部分で0にならず困っています。 タブレット端末だと値の取り方が違ってくるのでしょうか？ ご教授ください。

  • ginfix
  • お礼率34% (330/962)

質問者が選んだベストアンサー

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

私には確認する環境がないので推測 使っているjQueryがNexus7に対応していないんじゃない？

その他の回答 (1)

回答No.2

「商」が０になることがむしろめずらしいのでは？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • IEのみスクロールイベントで要素がちらつきます

    スクロールイベントで要素を追尾する処理をJavaScriptで記述しました。 他のブラウザでは綺麗に追尾してくれているのですが IE(ver9)だけ要素がちらつきながら追尾します。 スムーズにしたいのですが以下のソースのどこがいけないのでしょうか？ 解決方法を教えて下さい。 [HTML] <a id="pageTopButton" href="#">ページ上部へ</a> [CSS] #pageTopButton { width: 100px; position: relative; } [JavaScript(jQuery)] /////初期設定 var viewWindowBottom = $(window).scrollTop() + $(window).height(); $("#pageTopButton").css("top", (viewWindowBottom - ($("#pageTopButton").height())) + "px"); ////画面をスクロール時のイベント $(window).scroll(function(){ var viewWindowBottom = $(window).scrollTop() + $(window).height(); $("#pageTopButton").css("top", (viewWindowBottom - ($("#pageTopButton").height())) + "px"); });

  • スクロールの時間調節

    初めて投稿します。　よろしくお願いします。 下記のような　ソースで　テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう？ プログラムには詳しくないので　すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>

  • スクロール位置　ページ切り替え前と同じにしたい

    POST送信をしてページが切り替わった時に、切り替え前のスクロール位置にスクロールが来るようにしたいです。 以下のソースでスクロール位置は取得できるようなのですが、切り替え後のページに反映させるにはどうしたらいいでしょうか？ function getScrollPosition() { var obj = new Object(); obj.x = document.documentElement.scrollLeft || document.body.scrollLeft; obj.y = document.documentElement.scrollTop || document.body.scrollTop; return obj; }

  • jqueryでscrollTopの値をとりたい

    貴重な場をお借りして、ぜひとも教えていただきたいことがございます。 今、スクロールをすると要素がフェイドインするようなjqueryを書いています。 下記をご覧ください。 $(window).on("scroll", function(){}の中に入っているscrollTop,scrollVolを このfunctionの外でも使用したいのですが、方法はございますでしょうか。 つまり、if文のscrollVolに値を入れたいのですがunderfindとなってしまいます。 $(window).on("scroll", function(){}の中でif文を実行すれば取得はもちろんできるのですが、この外側で使用したい場合どうすればよろしいでしょうか。 お手数ですが、お力を貸していただけませんでしょうか。 よろしくお願いいたします。 function paralax(){ var target = $('#sec1'); var targetOffset = target.offset().top; target.css('display','none'); var scrollTop , windowHeight , scrollVol; windowHeight = $(window).height(); $(window).on("scroll", function(){ scrollTop = $(window).scrollTop(); scrollVol = scrollTop + windowHeight; }); if(targetOffset <= scrollVol){ target.fadeTo(400 , 1); } }

  • スクロールメニューが宣言を入れるとIEだけでしか動作しないので、困っています。

    サイドメニューバーをスクールに合わせて動く、スクリプトを使っていますが、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">を入れると、 IEでしか、動きません。 また、上記の宣言を抜くと、IE以外では動きますが、 IEでのCSS表示が崩れてしまいます。 原因を教えてください。 使用しているスクリプトは下記です。 <script type="text/javascript"> var timer window.onload = scrolltop; window.onunload = stoptimer; function scrolltop() { var menu = document.getElementById('scrollmenu'); var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; menu.style.top = scrollTop; timer = setTimeout("scrolltop()",10); } function stoptimer() { clearTimeout(timer) } </script> 何卒、宜しくお願いします。

  • 現在jQueryで背景色が変るナビを作っていて…

    現在jQueryで背景色が変更するナビゲーションを作っていますが、他のブラウザでは反応するのに、firefoxでは反応しません。 トップページからとあるページの特定部分へのリンクの場合です。 スクロールすると背景が追従してくるので問題ないのですが、スクロールせずクリックしただけの場合無反応です。 おそらくjQueryがスクロールになっているからだと思うのですが、 どう書き換えたらいいのかが分かりません。 クリックしてそのページにジャンプした場合に反応するjQueryにするには、 どう書き換えたらいいのでしょうか？ 急ぎご回答願います。 // JavaScript Document $(window).load(function() { var set = 300;//ウインドウ上部からどれぐらいの位置で変化させるか var boxTop = new Array; var current = -1; //各要素の位置 $('.box').each(function(i) { boxTop[i] = $(this).offset().top; }); //最初の要素にclass="on"をつける changeBox(0); //スクロールした時の処理 $(window).scroll(function(){ scrollPosition = $(window).scrollTop(); for (var i = boxTop.length - 1 ; i >= 0; i--) { if ($(window).scrollTop() > boxTop[i] - set) { changeBox(i); break; } }; }); //ナビの処理 function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1;//HTML順序用 $('#nav li').removeClass('on'); $('#nav li:nth-child(' + secNum2 +')').addClass('on'); /* 位置によって個別に処理をしたい場合 if (current == 0) { // 現在地がsection1の場合の処理 } else if (current == 1) { // 現在地がsection2の場合の処理 } else if (current == 2) { // 現在地がsection3の場合の処理 }*/ } }; });

  • スムーズスクロールとfleXcrollの併用

    よろしくお願い致します。 jQueryを使用して、「overflow: auto」を指定している要素内でスムーズスクロール出来る方法を探しており、以下のようなコードを見つけました。 $(document).ready(function(){ var box = $('#contents'); $(document).click(function(event){ var obj = $(event.target); var anchor = obj.filter('a[href*="#"]'); if (!anchor[0]) anchor = obj.parents('a[href*="#"]'); if (anchor[0]){ var target = $(anchor[0].hash, box); if (target[0]){ var scrollTop = box.scrollTop(); var dist1 = box.prop('scrollHeight') - box.prop('clientHeight') - scrollTop; var dist2 = target.position().top - box.position().top; box.animate({ scrollTop: scrollTop + Math.min(dist1, dist2)}); return false; } } return true; }); }); ↑このコードで「overflow:auto;」を指定している要素内でスムーズスクロールが出来るようになったのですが、スクロールバーを装飾できる「fleXcroll（http://shanabrian.com/web/library/flexcroll.php）」プラグインと併用すると、スムーズスクロールが効かなくなってしまいます。 「fleXcroll」のコードは「http://www.hesido.com/web/flexcroll.js」になる（記述が長くここには書ききれませんでした）のですが、薄識のため何処に問題があるのか分からない状態です。 ちなみにHTMLは、下記のようなコードで使用しています。 <div id="navi"> 　<ul> 　　<li><a href="#A">divAへ移動</a></li> 　　<li><a href="#B">divBへ移動</a></li> 　　<li><a href="#C">divCへ移動</a></li> 　　<li><a href="#D">divDへ移動</a></li> 　　<li><a href="#E">divEへ移動</a></li> 　</ul> </div> <div id="hoge" style="height:500px; overflow:auto;"> 　<div id="A">divAの内容</div> 　<div id="B">divBの内容</div> 　<div id="C">divCの内容</div> 　<div id="D">divDの内容</div> 　<div id="E">divEの内容</div> </div> 分かりにくい説明で恐れ入ります。 補足説明致しますので、お分かりになる方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。

  • cssのtranslateYを変えたい

    知識のある方、教えていただきたいです。 やりたいことは、jqueryでtranslateYにscrollTop - offsetTopを代入するということです。何が間違っているのでしょうか。 $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); headerFix(); function headerFix(){ var $header = $('#tableLayout thead'), offsetTop = $header.offset().top, windowHeight = $(window).height(); $(window).on('load scroll orientationchange resize' , function(){ var scrollTop = $(window).scrollTop(); if (scrollTop >= offsetTop){ $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); }else{ }; }); }

  • スクロール位置を中央にしたい

    こんにちは。質問させてください。 クリックした位置に画面がスクロールするものを作っています。 今の状態だとクリックした位置にスクロールするのですが ストップする位置が画面の左上で止まります。 これを画面の中央で止まるようにしたいのです。 ヒントをいただけませんでしょうか。宜しくお願い致します。 // 現在のスクロール量を取得 function getScroll(){ var x, y; if(document.all !== void 0){ // IE4, IE5, IE6 x = document.body.scrollLeft; y = document.body.scrollTop; }else if(document.layers !== void 0 || (navigator.userAgent.indexOf("Opera") != -1 || window.opera !== void 0)){ // NN4, Opera6 x = window.pageXOffset; y = window.pageYOffset; }else if(navigator.userAgent.indexOf("Gecko") != -1){ // NS6, Mozilla x = window.scrollX; y = window.scrollY; }else{ x = y = 0; } return {x: x, y: y}; } // スクロール始めのスクロール量 var SCROLL ; var divCountScroller = 50 ; // 分割数 // 現在のスクロール位置から、指定座標までスクロールします function scroller( x, y, count ){ if( count === void 0 ){ count = 0 ; SCROLL = getScroll(); } if( count++ < divCountScroller ){ var c = count/divCountScroller ; var nx = SCROLL.x+( x-SCROLL.x )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); var ny = SCROLL.y+( y-SCROLL.y )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); window.scrollTo( nx, ny ); setTimeout( "scroller("+x+","+y+","+count+");", 30 ); } }

  • jquery 追従メニュー　IEについて

    下記jqueryを使って追従メニューを制作した時に、IEで確認すると限りなくスクロールできてしまいます。 解決する方法を検索しましたがわかりませんでした。 どなたかお分かりの方教えてください。 よろしくお願いします。 <script type="text/javascript"> $(function() { var offset = $("#leftcontent2").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#leftcontent2").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#leftcontent2").stop().animate({ marginTop: 0 }); } }); }); </script>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する