• 締切済み

子要素のスクロールが親要素に伝播しないようにしたい

スクロールバーを持つ子要素 と その親要素であるwindow があり、 子要素のスクロール位置が一番上にある状態で、上に向かってホイールスクロールすると親要素windowのスクロールバーが動いてしまいます。 また、その逆に 子要素のスクロール位置が一番下にある状態で、下に向かってホイールスクロールすると親要素windowのスクロールバーが動いてしまいます。 この挙動をやめたいのですがどのようにすればよいでしょうか。 具体的にはFacebookの右上（外側のサイドバーの上）にあるフレンドのアクティビティを表示している領域の様な動作にしたいです。 下記コードでは実現出来ませんでした。 $("#sample").on('scroll mousewheel', function(event) { event.stopPropagation(); }); ライブラリはjqueryを使っています。 よろしくお願いします。

みんなの回答

回答No.1

スクロール処理を止めるのは event.preventDefault() ではないでしょうか。（未検証です） event.cancelBubble=true; を併記してみてはいかがでしょうか。（IE用）

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

関連するQ&A

  • javascriptでスクロールの上下を検知

    $(window).scrollイベントで、「上にスクロールした時」や「下にスクロールした時」という ことをjavascriptで検知できるのでしょうか。

  • 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"); });

  • 表示時にdiv要素のスクロール位置を指定したい

    上部にヘッダー、左にメニュー、右にコンテンツ、下部にフッターという、２カラムのHTMLなのですが、左右のdiv要素にoverflowでスクロールをそれぞれ付けています。 問題なのは、この左側のメニューで、サイト内リンクをクリックすると新しくリンク先ページが開くので、当然スクロール値は０になります。 後方のボタンの場合、どのボタンを押したのかわからなくなってしまいます。 ということで、javascriptでスクロールの位置を調整したいのです。 私は初心者でして、見よう見まねで下記のように書いてみたのですが、スクロール値は０のままです。 根本的に間違っているのかすら解らずで、ご教授願いたいと思い投稿させて頂きました。 宜しくお願いいたします。 window.onload = function(){ sub_scroll.scrollTo('se'); } ※sub_scrollは左のdiv要素のidです。 seは先頭にしたい箇所のidです。

  • スクロール位置に関してです

    お世話になります PHP4でHP作成しています Windowのスクロール位置に関して質問させて下さい 親Windowから子Windowを呼び出して 子Windowを閉じるタイミングで 親Windowのリロード処理を行っています そこで、親Windowのスクロール位置がTopに戻ってしまう現象が起きてしまい 困っています リロード処理はJavaScriptを使用して 　echo "<script type='text/javascript'>"; 　echo "window.close();"; 　echo "window.opener.location.reload();"; 　echo "</script>"; と書いています 通常F5キーの更新処理を行うと スクロール位置が更新前の位置にセットされるので JavaScriptからの指定も上手く行くのではないかと思ったのですが… 宜しくお願いします

  • 高さを指定せずに子divにスクロールバー

    お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか？ 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか？ お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> （「親divの高さ」-「他の要素の高さ」）＜「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか？無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>

    • 締切済み
    • CSS
  • ブロック要素の横スクロールバーのカスタマイズ（画像）

    ブロック要素の横スクロールバーを画像にしたいです。 http://www.apple.com/jp/mac/ の上のメニューみたいに横にスライドし、スクロールバーを画像にしたいのです。 ボタンをクリックして任意の位置に飛ぶスライドはすでにすでにできています。 スクロールバーの差し替えとして http://www.n-son.com/scripts/jsScrolling/new/example2.html を参考にしてやってみていますが、横スクロールバーに応用したいのですが、どこをかえたらいいかわかりません。 アドバイスよろしくおねがいします。

  • 親要素のwidthは子要素のwidthに関係ないのでしょうか？

    お世話になります。 HTMLに疎いプログラマです。。。 タイトルの通りですが、質問があります。 たとえば <div> 　<table> 　</table> </div> のように親要素(div)と子要素(table)があるとします。 この時、<table>がものすごく横長の場合（横スクロールが必要なほど）、その横幅に応じて親要素のdivは横に伸びないのでしょうか？ 上記のソースにCSSでborderで線を表示してみたのですが、 <table>は横長になっているにもかかわらず、親の<div>は画面内に収まっているのです。 僕の思惑は、<table>が横に伸びればその親要素である<div>も子要素に応じて横に伸びてほしいのですが、、、。 それができる方法があれば教えて頂きたいです。 それは無理だという仕様であればあきらめます。 どうかお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでスクロールバー

    CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか？右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか？？

    • ベストアンサー
    • HTML
  • 親html内の要素を新しいウィンドウで表示するには

    宜しくお願い致します。 親htmlとして閲覧している時には表示されない特定のdiv要素を「表示する」といったようなボタンをクリックすることで、子ウィンドウに読み込ませて表示させることができるコードを探しております。 通常、親htmlから子ウィンドウを表示させるには、子ウィンドウに読み込むhtmlファイルを別に用意し、親htmlから子ウィンドウを表示させるのが普通かと思うのですが、事情があり、子ウィンドウ用のhtmlを用意できません。 なので、親htmlに子ウィンドウとして読み込ませるdiv要素を書き、親htmlとして閲覧している時はdisplay:none;のような感じで非表示にしておき、「子ウィンドウを開く」などといったボタンをクリック、子ウィンドウに親htmlに書かれているdiv要素を読み込んで表示させる、というようなことはできないものかと思っております。 やりたいことが抽象的で、検索しても思うような事例が見つからないため、こちらで質問させて頂きました。 子ウィンドウを開くためのコードは下記のようになっております。 ■親html <html> <head> <script type="text/javascript"> <!-- function gene_window(mypage, myname, w, h, scroll) { var win_width = (screen.width - w) / 2; var win_height = (screen.height - h) / 2; win_detail = 'height='+h+',width='+w+',top='+win_height+', left='+win_width+',scrollbars='+scroll+',resizable' win = window.open(mypage, myname, win_detail) if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); } } --> </script> </head> <!--普通に表示する部分--> <div> <a href="●●" onClick="gene_window(this.href, 'name','500','400','yes');return false;">子ウィンドウを開く</a> </div> <!--子ウィンドウとして表示したい部分※親htmlでは非表示--> <div style="display:none">hogehoge</div> </body> </html> 子ウィンドウを開くと、<div style="display:none">hogehoge</div>の部分だけが子ウィンドウに読み込まれ、<div>hogehoge</div>として表示される。 分かりにくい説明で申し訳ありません。 補足説明致しますので、もしお分かりの方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。

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

    こんにちは。質問させてください。 クリックした位置に画面がスクロールするものを作っています。 今の状態だとクリックした位置にスクロールするのですが ストップする位置が画面の左上で止まります。 これを画面の中央で止まるようにしたいのです。 ヒントをいただけませんでしょうか。宜しくお願い致します。 // 現在のスクロール量を取得 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 ); } }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する