topへ戻るbutton
やるための汎用的な条件
const returnTop = () => {
scrollTo({
top: 0,
behavior: 'smooth'
})
}
画面全体を横スクロールにする。
-
横スクロールの仕組みから知る スクロールバーやマウスホイールによる上下スクロールの処理をキャンセルし、カラムコンテナーを左右移動させることであたかもスクリーンが左右にスクロールしているかのように見せることができる。
-
手順
- HTML上でコンテンツカラムを用意してカラムコンテナーに格納する。
- それぞれのコンテンツカラムを横に並べ、それぞれの縦横サイズをスクリーンサイズにあわせ、また配置位置座標を任意の記憶領域に格納しておく
- マウスホイール、スワイプなど、ユーザによるスクロール操作が行われた場合は、デフォルトの処理をキャンセルし、左右スクロール用の処理を実行する。
- ナビゲーションメニューによるダイレクトリンク機能と 現在地機能を実装する。
マウスの上と下のスクロールを判断する
マウスの値を上に回した場合は正の値がscrollLeftに入るため、スクロールの値を反転させないといけなかった。
以下はデモ
window.onmousewheel = function(event){
if(event.wheelDelta > 0){
//mainCamera.zoomTo(4, 100);
}else{
//mainCamera.zoomTo(1, 100);
}
}
- マイナスの値をプラスの値に変更する
let n1 = -(12);
let n2 = -(-10);
console.log(n1,n2);
//-12,10