JavascriptとCSSのfixedでヘッダーを固定しつつ横スクロールさせた話とAWSでデプロイした話

AWSのデプロイした話から

昨日めでたく実務で初デプロイをしてきました。めでたい！
ちょこっとした修正ですが、引き継ぎでもらったコードだったので、
読むの疲れた、、、

ってことで、デプロイの流れを。

まずはデプロイ用のブランチを最新に

gitの管理はソースツリーを使っております。
他のツールでも大体一緒なはず。

デプロイ用のブランチとdevブランチをマージで統合

→リモートリポジトリへプッシュ

→AWSのEC2インスタンスにSSH接続
※インスタンスに入るときは、.sshディレクトリに入ってからね。ここに鍵になるpemファイルが入ってないとだめ。
私はホームディレクトリからやって繋がんなくてちょと焦った。

→AWS内でさっき最新にしたデプロイ用のブランチをgit pull！
これで完了。

Laravelのマイグレーションファイルを作ってたり、DBのカラムを作成していたら、
本番環境のDBの更新も忘れずに行います。

これでデプロイ完了！めでたい！

ビールを飲んで完了です。

Javascriptでの横スクロールとCSSのfixedでヘッダーを固定しつつ横スクロールを実装した話

ということで、タイトルの話を。

ここで詰まったきっかけは、
CSSのposition:stickyとoverflow:xyが打ち消しあってしまい。
Gridは縦横スクロールしながら、ヘッダーは横スクロール、縦スクロール時は固定
という挙動が実装できなかったのです。

結論から

ヘッダーの固定は、position:fixed
ヘッダーの横移動はJSのscroll使ってデータテーブルのスクロールの値を取得、
同様の動きをヘッダーがする様にstyleのleft値を変更する関数を使う。

という形になりました。

ひっじょーに参考になった記事がありましたので、共有。
参考 https://tech.arms-soft.co.jp/entry/2022/04/20/090000

const element = document.querySelector('.js-scroll-x')
//要素を指定
  
window.addEventListener('scroll', () => {
  element.style.left = -window.pageXOffset + 'px'
})
//windowのスクロール距離を取得して、指定した要素のstyleに距離をマイナスでpx単位で追加

神、、、

自分のコードに合わせてちょっと変えたらできた。
スクロールするのが、windowではなく、tableだったので、

tableのスクロール距離を変数に格納して、
window.pageXOffsetの代わりに変数を入れた。

うーん。いい感じ。
まだ仕上げは残ってるけど、まあ実質おわりじゃろ！
完成したらコミケ行くんだ、、、！

ってことでチューハイ飲んで寝まっす！

おわり。