Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

スクロールエリアがタイムラインに限定されるのを以前のようにするオプション? #10974

Open
saschanaz opened this issue Jun 8, 2023 · 25 comments
Labels
✨Feature This adds/improves/enhances a feature packages/frontend Client side specific issue/PR

Comments

@saschanaz
Copy link
Member

Summary

マウスでもちょっと不便ですが、Surfaceとかタッチスクリーンでスクリールする時一番不便です

たぶんどうでもいいでしょうが、こういうものもあります

  1. Ctrl+Fで単語検索してもスクロールバーのハイライトが現れない
  2. Ctrl+Pで全体プリントができない

(https://p1.a9z.dev/@saschanaz/pages/1686241646979 vs https://misskey.io/@saschanaz/pages/1686241519536)

@saschanaz saschanaz added the ✨Feature This adds/improves/enhances a feature label Jun 8, 2023
@acid-chicken
Copy link
Member

Related to #10964

@acid-chicken
Copy link
Member

iPad Safari でマジで不便している

@acid-chicken acid-chicken added the packages/frontend Client side specific issue/PR label Jun 8, 2023
@syuilo
Copy link
Member

syuilo commented Jun 8, 2023

解決策募集中

@syuilo
Copy link
Member

syuilo commented Jun 8, 2023

おそらくDiscordとかSlackとかもbodyスクロールではないと思うけど、それらはどう解決してるんだろう

@syuilo
Copy link
Member

syuilo commented Jun 8, 2023

Surfaceとかタッチスクリーンでスクリールする時一番不便です

iPadで使ってるけどUX的には以前と全く変わりないように感じてるんだけどどのように不便?

@tamaina
Copy link
Member

tamaina commented Jun 9, 2023

iPad Safari でマジで不便している

具体的に何ができなくて?

@acid-chicken
Copy link
Member

iPad Safari でマジで不便している

具体的に何ができなくて?

  • 画面スクロールできる範囲が少ない
  • ステータスバーを触って最上位スクロールができない
  • 下までスクロールするとスクロールバーがつかめない

など挙げたらきりがない

@saschanaz
Copy link
Member Author

タブレットで操作

image

こう持ってたら問題ない

image

でもこう持ってたら問題しかない(握ってる両手でスクロールできず、片手を中央に移動する必要がある)

ということで、範囲の問題が大きいです

@syuilo
Copy link
Member

syuilo commented Jun 9, 2023

でもこう持ってたら問題しかない(握ってる両手でスクロールできず、片手を中央に移動する必要がある)

サイドバーをアイコンのみ表示にしたらいいかも

@acid-chicken
Copy link
Member

おそらくDiscordとかSlackとかもbodyスクロールではないと思うけど、それらはどう解決してるんだろう

別にそれらで快適とは思わない(し、それを承知でネイティブアプリが使われるのであまり影響がないだけでは)

@saschanaz
Copy link
Member Author

bodyスクロールでどんな問題がありましたか?(bisectしてない)

@syuilo
Copy link
Member

syuilo commented Jun 9, 2023

いくつかレイアウト設計上の問題があるけど、一例を挙げると「ウィジェットをTLのスクロールと連動しないようにして」という要望があるからウィジェットを独立したスクロールにしたいんだけど、そうするとbodyスクロールだとスクロールバーが右に二重に表示されることになり分かりづらい、とか
image

@acid-chicken
Copy link
Member

ウィジェットをTLのスクロールと連動しないようにして

これの実現のためだとしたら対価が重すぎる気がする

@syuilo
Copy link
Member

syuilo commented Jun 9, 2023

デザインしているとbodyスクロール縛りは今後より厳しくなってきそうな感じがしている

@acid-chicken
Copy link
Member

基本的に body スクロール = メイン要素のスクロールにしておかないとむしろ問題を引き起こしやすいと自身の経験則で感じている(例えば iOS Safari の dvh 変化などは body スクロールを無効にしてもそこに overscroll があるような挙動をしがちだったりとかするため)

@syuilo
Copy link
Member

syuilo commented Jun 9, 2023

モバイルとデスクトップでuniversal.vue分割するか

@acid-chicken
Copy link
Member

スクロールバー位置については、一応 body のスクロールバーを隠してメイン領域にスクロール専用の要素を置いてバインドさせるとかは考えられる(分割でうまくいくならそれでも)

@syuilo
Copy link
Member

syuilo commented Jun 9, 2023

モバイルとデスクトップでuniversal.vue分割するか

分割ちょっと大変で最終手段にしたいからそれ以外でいい感じにするPR募集中

@saschanaz
Copy link
Member Author

いくつかレイアウト設計上の問題があるけど、一例を挙げると「ウィジェットをTLのスクロールと連動しないようにして」という要望があるからウィジェットを独立したスクロールにしたいんだけど、そうするとbodyスクロールだとスクロールバーが右に二重に表示されることになり分かりづらい、とか

この点はウィジェットにoverlay scrollbar適用したらbodyスクロールのままでよさそうです

@tamaina
Copy link
Member

tamaina commented Jun 9, 2023

基本的に body スクロール = メイン要素のスクロールにしておかないとむしろ問題を引き起こしやすいと自身の経験則で感じている

これはすごいわかる

@tamaina
Copy link
Member

tamaina commented Jun 9, 2023

overlay scrollbar

Firefoxにoverflow: overlayないじゃん

@saschanaz
Copy link
Member Author

saschanaz commented Jun 9, 2023

overlay scrollbar

Firefoxにoverflow: overlayないじゃん

👀(というかChrome以外はFirefox/Safariは基本overlayですので)
image

Edit: Edgeは基本overlayじゃなかったです(Chrome/Edge両方にflagはある)

@tamaina
Copy link
Member

tamaina commented Jun 15, 2023

overlayだとしても、メインのスクロールバーがウィジェットを挟んだ位置にある、もしくはウィジェットのスクロールバーと被さってるとかになるはずなので、微妙

@saschanaz
Copy link
Member Author

メインのスクロールバーがウィジェットを挟んだ位置にある

margin-right: 5pxとかでなんとかなりません?

@tamaina
Copy link
Member

tamaina commented Jun 15, 2023

(えっどういうハック?)(あんまり手を動かす気になってない)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨Feature This adds/improves/enhances a feature packages/frontend Client side specific issue/PR
Projects
None yet
Development

No branches or pull requests

4 participants