fix(StudentSelector): 改善在浏览器视宽小于 768px 时，学生筛选界面的显示效果

[ChangeSuger]

改善在浏览器视宽小于 768px 时，学生筛选界面的显示效果，改善效果如下图所示：

另外还有一个可以优化的点，对于 window 系统，在浏览器视宽小于 768px 时，由于垂直滚动条的存在（Widows 系统中的滚动条是会占据视口空间的），宽度设置为 100vw 的元素会有一部分被垂直滚动条遮挡，以及会出现水平滚动条（上图中也有体现这个问题）。

[sweep-ai[bot]]

Apply Sweep Rules to your PR?

• [ ] Apply: Any clearly inefficient or repeated code should be optimized or refactored.

[mark9804]

垂直滚动条

这个理论上可以通过更改 ::-webkit-scrollbar 元素来控制，比如说监听滚动事件，只在滚动时显示。具体情况因为我主力是 mac，开虚拟机太麻烦了所以没试过可行性。

不过我应该已经改过了才对 https://github.com/ba-archive/blue-archive/blob/0856c14b25da1388e1f646bfb24cb5672aaa1d98/apps/blue-archive-story-viewer/src/style.scss#L325-L344

难道是没有识别到系统为 Windows？

[mark9804]

水平滚动条这个可能是图有问题，我这边看只能加载一半，看不到底下的水平滚动条

[mark9804]

滚动条是会占据视口空间的

可以尝试用 scrollbar-gutter 属性来控制，不过这个属性比较新，如果真想做到完美并且有一定兼容性的话可以参考 element-plus 的解决方案

[ChangeSuger]

垂直滚动条

这个理论上可以通过更改 ::-webkit-scrollbar 元素来控制，比如说监听滚动事件，只在滚动时显示。具体情况因为我主力是 mac，开虚拟机太麻烦了所以没试过可行性。

不过我应该已经改过了才对

https://github.com/ba-archive/blue-archive/blob/0856c14b25da1388e1f646bfb24cb5672aaa1d98/apps/blue-archive-story-viewer/src/style.scss#L325-L344

难道是没有识别到系统为 Windows？

https://github.com/ba-archive/blue-archive/blob/0856c14b25da1388e1f646bfb24cb5672aaa1d98/apps/blue-archive-story-viewer/src/style.scss#L320

视宽小于 768px 时这个样式失效了

可以尝试用 scrollbar-gutter 属性来控制，不过这个属性比较新，如果真想做到完美并且有一定兼容性的话可以参考 element-plus 的解决方案

感谢指点❤，我研究研究

[mark9804]

视宽小于 768px 时这个样式失效了

我的我的

[ChangeSuger]

水平滚动条这个可能是图有问题，我这边看只能加载一半，看不到底下的水平滚动条

水平滚动条出现的原因是这样的：

• Windows 系统下的浏览器滚动条占视宽，使得 html 元素的实际宽度等于 (100vw - 滚动条宽度) < 100vw
• body 元素的宽度被设置为 100vw（此时 100% < 100vw），水平方向存在溢出，因此出现水平滚动条

总体来说这是垂直滚动条与 100vw 之间的冲突（把涉及到的 100vw 替换成 100% 应该就能解决）

[ChangeSuger]

总体来说这是垂直滚动条与 100vw 之间的冲突（把涉及到的 100vw 替换成 100% 应该就能解决）

我的，把 body 的高度锁定为 100vh 然后内部调整一下滚动条就行

[ChangeSuger]

我的，把 body 的高度锁定为 100vh 然后内部调整一下滚动条就行

优化后的效果：

[mark9804]

其实右边的排版是有问题的（设计上这时候 filter 应该是隐藏状态），不过算了等过两个月新 UI 设计好直接重写了（现在这个组件我自己都不太看得下去）

大佬有没有兴趣加入我们，群 786830134