実現したいこと

yahooのページで、ページ内画像をドラッグしながら、ページ下部に持っていくと自動的に下にスクロールします。

しかし、スクロールを開始するエリアは限定的で、ページ下部ギリギリまでドラッグしないと、スクロールしません。

私が作成したページでは、スクロールを自動で開始するエリアを広げたいです。
ページ下部20%ぐらいのエリアにドラッグしたら、ドラッグしたまま下にスクロールさせるようにしたいです。

どのようにすれば実現できるでしょうか？

x_x

2019/06/12 01:19

作ったサイトというわけではなく、Yahoo を見ているときの話なのですか？

退会済みユーザー

2019/06/12 01:29

いいえ、作ったサイトの話しです。動作イメージをしていただくために、yahooを例としてあげました。

行動規範の内容に同意します

回答2件

~~間違いのご指摘があったので検証するまでいったん削除します。~~
誤りがあったので削除します。

dragイベントを使えばいい……と思ったのですが、試してみるとマウス位置が検出されないみたいです。
Document: drag イベント - Web API | MDN

なので、透明な要素をスクリーン下部に用意して、dragenterイベントを拾ってスクロールさせる、というやり方が無難なような気がします。
Document: dragenter event - Web APIs | MDN

追記

dragイベントを検出したらmousemoveイベントでマウス位置を拾う、という合わせ技を思いつきました。
Element: mousemove event - Web APIs | MDN

追記

dragenterイベントを使う方法もそれほど筋は悪くない、と思いなおしたので、サンプルを作成しました。
サンプル

js
1var f = false;
2var scroll = function(){
3  scrollBy(0,1); 
4  if (f) var id = requestAnimationFrame(scroll); 
5}
6var scrollArea = document.getElementById('scrollArea');
7scrollArea.addEventListener('dragenter', function(){
8  f = true;
9  scroll();
10});
11scrollArea.addEventListener('dragleave', function(){
12  f = false;
13});

html
1<img src="http://placehold.jp/150x150.png?text=" draggable>
2<div id="scrollArea">
3
4</div>

css
1body {
2  height: 2000px;
3}
4
5#scrollArea {
6  position: fixed;
7  height: 20vh;
8  bottom: 0;
9  width: 100%;
10  background: gray;
11}

投稿2019/06/12 02:57

編集2019/06/12 04:35

Lhankor_Mhy

総合スコア37408

x_x

2019/06/12 03:14

DragEvent は MouseEvent を継承しているので「マウス位置が検出されない」というのは勘違いではないかと思うのですが、どのように検証されたのでしょうか？

Lhankor_Mhy

2019/06/12 03:23 編集

おお、そうでしたか。それは失礼しました。では、mousemoveイベントは必要ないですね。検証方法についてですが、https://developer.mozilla.org/ja/docs/Web/API/Document/drag_event のサンプルコードで event のログを見たのですが、何か勘違いしたようですね。イベントソース要素の位置とかを見てしまったのかな？　あとで確認してみます。

kei344

2019/06/12 03:35

https://jsfiddle.net/gnx4ofv2/ Chromeは採れますが、Firefoxは採れませんでした。

Lhankor_Mhy

2019/06/12 03:47

> kei344さんご検証ありがとうございます。なるほど、実装の問題でしたか。であれば、webkit系は大丈夫でしょうから、シェアの問題上、Firefoxは無視しちゃっていいんでしょうね。

x_x

2019/06/12 05:39 編集

なるほど Firefox で drag では常に0になってしまいますね。他は確認していませんが、少なくとも dragover なら値が取れるようです。シェアが下がったとはいえ個人的には無視できるほどではないと思っています。情報追加します。 https://bugzilla.mozilla.org/show_bug.cgi?id=505521

退会済みユーザー

2019/06/12 05:59

Lhankor_Mhyさん、ありがとうございました。実装中のページに適用しやすかったため、今回はx_xさんをベストアンサーにさせていただきました。

行動規範の内容に同意します

ベストアンサー

dragover があります。
https://developer.mozilla.org/ja/docs/Web/API/Document/dragover_event

スクロール領域が div 要素だとして(適宜変更してください)。

CSS
1div {
2  max-height: 70vh;
3  overflow-y: scroll;
4  scroll-behavior: smooth;
5}

jQuery
1$('div').on('dragover', function(event) {
2  var div = event.currentTarget;
3  var rect = div.getBoundingClientRect();
4  var ratio = (event.clientY - rect.top) / (rect.bottom - rect.top);
5  if (ratio >= 0.8) {
6    div.scrollTop += 100 * (ratio - 0.6);
7  }
8});