IEでliタグをドラッグしながら下にスクロールさせる小技
以下のようなhtml, cssがあったとき、任意のhogeをクリックしながら下の枠外までスクロールすると、Google ChromeやFirefoxだとスクロールしてくれますが、Internet Explorer(以下IE
)だとスクロールしません。
実際には、li
タグにmousedown, mouseup
イベントを付与して、ドラッグされたタグの背景色を変更してます。
- html
<h4>クリックしながら下にスクロールして下さい。</h4> <div> <ul> <li> <label>hoge</label> </li> <!-- 以下、liを複数個(スクロールする分)用意 --> </ul> </div>
div { overflow-y: scroll; -webkit-user-select: none; /* Google Chrome, Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE */ user-select: none; /* CSS3 */ height: 200px; width: 300px; border: 1px solid; } ul { padding: 5px; margin: 0px; } li { border: 1px solid #EEE; background-color: #EEE; border-radius: 5px; margin: 3px; list-style-type: none; text-align: center; } li:hover { background-color: #DDD; } li label { font-size: 20px; line-height: 30px; cursor: pointer; }
これは、親のタグ(今回はdiv
)で-ms-user-select: none
を指定しているため、IEだとドラッグしていても選択していないと判断されているらしく、スクロールしないことが原因(ブラウザの仕様?)みたいです。それでもスクロールさせたい場合はどうするか?
A: li
タグに改めて-ms-user-select
属性を付ける
自分はこのように解決しました。親のタグでnone
をしているのだから、子供本人のタグで再度選択していると判断させれば良い、ということですね。
ただし、これには以下のような欠点があります。
-ms-user-select: text
:ドラッグされた全てのタグのテキストが選択されてしまう-ms-user-select: element
:ドラッグ開始のタグのテキストが選択されてしまう
自分はelement
を付けることを許容しました(スクロールされないことは許容できないため)。
2016/10/05 追記
テキストが選択されていても、それを解除する方法があった。
window.getSelection().removeAllRanges()
上記だと、window内のテキスト選択を丸っと全部解除してしまうが、今回はこれが期待値だったのでOK。 (※もっといい方法をご存知の方、切に情報を求めていますので、是非ご教示頂けますと助かります!!)
P.S.
IEなぞ消え去ってしまえばいい