ページを右/左にスワイプするとカード一覧/新規ページへ飛ぶスクリプト
スマホでPWAアプリとして使ってるとき用に
プロジェクト名が画面を占拠していたので、画面を広く使うためにナビゲーションバーに移動した。こうするとタップするには当たり判定が小さくなる
https://gyazo.com/3122d5228b88d3de155c20e230717306
ツイッターの公式アプリは左右にスワイプすることで、タイムライン⇆explore⇆通知⇆DMに移動できる。こんなふうにスワイプしてホーム画面に戻りたい
code:JavaScript
$(document).ready(function() {
var swipeStartX = null;
var swipeStartY = null;
var swipeThreshold = 50; // スワイプと認識する距離の閾値(ピクセル)
$(document).on('touchstart', function(event) {
swipeStartX = event.originalEvent.touches0.pageX; swipeStartY = event.originalEvent.touches0.pageY; });
$(document).on('touchmove', function(event) {
var currentX = event.originalEvent.touches0.pageX; var currentY = event.originalEvent.touches0.pageY; var distanceX = Math.abs(currentX - swipeStartX);
var distanceY = Math.abs(currentY - swipeStartY);
if (distanceX > distanceY && distanceX > swipeThreshold) {
if (currentX > swipeStartX) {
} else {
}
} else if (distanceY > distanceX) {
event.preventDefault();
}
});
});
戻るボタンやタイトルのボタンより時間がかかる
リロードしているようで、まっさらな画面が表示されて読み込みに時間がかかる
戻るボタンやタイトルのなんで早いんだろう
HTMLを見るとhref="https://scrapbox.io/foober/new">でなくhref="/foober/new">になっている。真似てドメインを省略して試したけど試す前と同じように時間がかかる
SPAの仕組みで遷移しているためですtakker.icon
次のコードを使うと、戻るボタンやタイトルと同じ早さで遷移できます
code:js
const a = document.createElement("a");
a.href = "/foober/new";
document.body.append(a);
a.click();
a.remove();
ありがとうございます。反映しました!kozv.icon
code:javascript
const jumpToNew = document.createElement("a");
jumpToNew.href = "/foober/new";
document.body.append(jumpToNew);
const jumpToTop = document.createElement("a");
jumpToTop.href = "/foober";
document.body.append(jumpToTop);
$(document).ready(function() {
var swipeStartX = null;
var swipeStartY = null;
var swipeThreshold = 50; // スワイプと認識する距離の閾値(ピクセル)
$(document).on('touchstart', function(event) {
swipeStartX = event.originalEvent.touches0.pageX; swipeStartY = event.originalEvent.touches0.pageY; });
$(document).on('touchmove', function(event) {
var currentX = event.originalEvent.touches0.pageX; var currentY = event.originalEvent.touches0.pageY; var distanceX = Math.abs(currentX - swipeStartX);
var distanceY = Math.abs(currentY - swipeStartY);
if (distanceX > distanceY && distanceX > swipeThreshold) {
if (currentX > swipeStartX) {
jumpToTop.click();
} else {
jumpToNew.click();
}
} else if (distanceY > distanceX) {
event.preventDefault();
}
});
});