マウス・マウスホイールで横スクロールするjavascript
jsに下記を記載
$(function() {
function mousedragscrollable(element){
let target; // 動かす対象
$(element).each(function (i, e) {
$(e).mousedown(function (event) {
event.preventDefault();
target = $(e); // 動かす対象
$(e).data({
"down": true,
"move": false,
"x": event.clientX,
"y": event.clientY,
"scrollleft": $(e).scrollLeft(),
"scrolltop": $(e).scrollTop(),
});
return false
});
// move後のlink無効
$(e).click(function (event) {
if ($(e).data("move")) {
return false
}
});
});
// list要素内/外でのevent
$(document).mousemove(function (event) {
if ($(target).data("down")) {
event.preventDefault();
let move_x = $(target).data("x") - event.clientX;
let move_y = $(target).data("y") - event.clientY;
if (move_x !== 0 || move_y !== 0) {
$(target).data("move", true);
} else { return; };
$(target).scrollLeft($(target).data("scrollleft") + move_x);
$(target).scrollTop($(target).data("scrolltop") + move_y);
return false
}
}).mouseup(function (event) {
$(target).data("down", false);
return false;
});
}
mousedragscrollable("●●スクロールさせたいid、classなど tableを包む枠など●●");
});
HOME > javascript > マウス・マウスホイールで横スクロールするjavascript
javascript
- slick sliderのサムネイルを縦に流す
- formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
- マウスオーバー・マウスアウト(スマホの時はクリック)で画像を切り替えるjquery。
- querySelectorAllエレメントのhrefをforEachで削除する
- jQuery,Masonry,imagesloadedで画像を敷き詰める
- jQueryで特定のページからリンクされた後のページでclassを追加
- カレンダー
- 特定の要素を持っていたら(あったら)jQuery
- スクロールすると上からニョキッと降りてくるメニューjQuery
- 横スクロール要素をマウスホイールで動かせるjavascript
- jqueryとcssでタブ
- 特定の要素を持つ時にclassを付けるjQuery
- スクロールして現れたらアニメーション(フェード等)開始jquery
- MOREボタンで数件ずつ要素を表示wp
- slick 基本
- スクロールして表示するとフェードイン
- スクロールして表示されたタイミングでアクションを起こすjs
- スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる(消える)
- Enterキーを押すとinputが空欄になるのを防ぐ
- jsでふわふわ縦に揺れる
- 特定の要素の幅と高さを取得するjavascript
- ウィンドウ幅リサイズごとにブラウザをリロードするjavascript
- サイトにローディングを実装するjavascript