LoginSignup
0

More than 5 years have passed since last update.

mousewheelイベントを使用してブロック要素のマウススクロールを有効化する

Posted at

e.preventDefault()でマウススクロールイベントが無効になってしまったので、以下で対処した。

hogeというブロック要素のスクロールを有効に。

//マウススクロールイベント
var scrollPosition = 0;
$('#hoge').on('mousewheel', function(e) {
  //マウススクロールした回転量を取得
  var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
  //対象要素の非表示領域を含めた縦幅を取得
  height = $('#hoge').get(0).scrollHeight;
  scrollPosition = scrollPosition-delta;
  if (scrollPosition < 0) {
    scrollPosition = 0
  }
  if (scrollPosition > height) {
    scrollPosition = height;
  };
  $('#hoge').scrollTop(scrollPosition);
});

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0