web-dev-qa-db-ja.com

ポインタイベントを使用して、スクロールイベントにのみ反応する方法を教えてください。

タッチパッドでのスクロールまたはドラッグにのみ反応するようにポインターイベントを設定することはできますか？複雑なhtml配置をスクロールするためのdivを持っています*。ポインタイベントをスクロール/マウスホイールのアクションにのみ反応するように制限できるかどうか知りたいのですが。

私はこれを正しく理解しているかどうか知りたいです。 pointer-events:none;は、すべてのイベントが無効であることを意味します。どのようにすればすべてのイベントを強制終了し、1つのイベントをアクティブなままにできますか？

ボックスが収まるボックスよりも大きいHTML領域を設定しましたが、スクロールバーを表示すると、ポップアップ（position：top）要素があるため、スクロールバーが本来よりも高く見えるようになります。この領域はまだスクロールする必要があるので、これを達成するには、jQueryを使用して、 'スクロールするボックス'をdiv内の非表示のdivに追従させます。

<div id="scrollcontrol"style="overflow-y:auto;overflow-x:hidden;position:absolute;
   top:12px;left:180px;width:40px;height:1300px;">
   <div id="catscrollpos"style="position:absolute;
    top:0px;width:200px;height:2250px;">
   </div>
</div>

脚本

$('#scrollcontrol').scroll(function({
  $('#rangetable').css({
  'top':$('#catscrollpos').position().top+'px'
  });
});
javascriptjqueryhtmlcssscroll
31
Ben Muircroft

docs での指定について：

要素が適用されたときpointer-events: none;

要素はneveranyマウスイベントのターゲットであり、すべてのイベントは無効;

このデモをご覧ください。

http://jsbin.com/wewosumehi/1/

イベントは発生していません。containerをスクロールすることもできません。

1
GibboK