[セレクトボックス使用時のページスクロール制御]

Question

インラインフレーム等をスクロールしたとき、
フレーム内の一番下まで行くとページごとスクロールされてしまうのを
制御する方法はありますでしょうか？

たとえば,,,

<select style="width:500px; height:100px;" multiple>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
</select>

ページの中に上記のようなセレクトボックスが合って、
一番下にある"G"までスクロールするとWebページごとスクロールされる

Answer 1

Chrome 以外が止まることに驚きました。
Chrome 以外の主要ブラウザはまずこの現象が起きないらしいので、 Chrome でしか試していないですが、

var fr = document.querySelector("iframe")
fr.onmousewheel = function(e){e.preventDefault()}

このようにフレームの外側で、フレームの onmousewheel を無効化すれば下までいってもページ全体がスクロールしないようにできました。

Comments

[star24star]

やはりChrome限定の現象なのですね
これはインラインフレームでないと実装不可能でしょうか？
selectタグなどで確認してみているのですが…

Answer 2

ie11 、ff33 win7 pc 用 ではそのような事象は発生しませんでした。
提示された、html前後にbr を50個、そのhtmlをiframeのsrcに指定して、iframeの前後にbrを50個、
ブラウザ表示し、iframe内を、selectまでスクロール、セレクトを矢印キーで、選択下方向に押しっぱなし。でも、iframeを含め、その親要素のスクロールバーは動きませんでした。
何か条件ありますか？スマホ用ブラウザとか、、、、

Comments

[star24star]

ご回答および動作確認、有難うございます！
確認環境はGoogleChromeでした。IEとFirefoxで確認してみたら確かにフレーム内でちゃんとスクロールが止まるのですね！
ということはGoogleChromeの仕様なのですかね…？？