嘿，针对你提出的两个滚动条相关问题，我来给你详细说说解决方案：

1. 能否将垂直滚动条放在左右以外的其他位置？ #

原生浏览器的滚动条确实只支持左侧或右侧（通过设置direction: rtl;可以把默认右侧的滚动条移到左侧，但本质还是只能在左右二选一）。如果想把垂直滚动条放在比如中间这类非左右的位置，那只能靠自定义模拟滚动条来实现：

• 核心思路是先把原元素的原生滚动条隐藏（设置overflow: hidden;），然后单独做一个模拟的滚动条元素（比如一个窄条div），放在你想要的任意位置。
• 接着用JavaScript监听原元素的滚动事件，同步更新模拟滚动条的位置；同时监听模拟滚动条的拖动、点击操作，反向控制原元素的滚动行为。
• 这种方式虽然能实现任意位置的滚动条，但需要自己处理滚动逻辑，还要兼顾兼容性和滚动流畅度，比如触摸设备的适配、滚动动画的顺滑度等，相对麻烦一些。

2. 模态框水平滚动时，让垂直滚动条始终固定在模态框右侧 #

这个需求完全可以实现，核心是把内容滚动区和垂直滚动条拆分开，让滚动条脱离内容流，固定在模态框的右侧：

具体实现步骤： #

1. 结构拆分：
   把模态框分成三层结构：

   • 最外层模态框容器：设置position: relative; overflow: hidden;（用来隐藏原生滚动条），同时提前预留滚动条宽度（适配Windows系统，因为Windows的滚动条会占用空间，可以固定加padding-right: 17px;，或者用JS动态计算滚动条宽度）。
   • 内容容器：设置overflow-x: auto; overflow-y: hidden; height: 100%;，只处理内容的水平滚动，里面放你的模态框实际内容。
   • 垂直滚动条容器：设置position: absolute; right: 0; top: 0; height: 100%; width: 17px;（Windows默认滚动条宽度），里面再放一个可拖动的滚动滑块。

2. JS同步滚动状态：

   • 监听内容容器的scroll事件，根据内容的垂直滚动距离，计算滚动滑块的位置（比如滑块top值 = (内容滚动距离 / 内容总高度) * (滚动条容器高度 - 滑块高度)），实时更新滑块位置。
   • 监听滚动滑块的拖动、鼠标滚轮（如果需要支持滚轮控制）事件，反向计算内容容器应该滚动的距离，调用contentContainer.scrollTop = 计算值来同步内容的垂直滚动。

3. 适配Windows和Mac的滚动条差异：

   • Windows系统的滚动条会占用页面空间，Mac的默认是悬浮不占空间，你可以通过CSS自定义滚动条样式，让两者表现更统一：

     /* 自定义滚动条样式，兼容Chrome、Safari和Firefox */
     .custom-scrollbar::-webkit-scrollbar {
       width: 17px;
     }
     .custom-scrollbar::-webkit-scrollbar-track {
       background-color: #f0f0f0;
     }
     .custom-scrollbar::-webkit-scrollbar-thumb {
       background-color: #ccc;
       border-radius: 8px;
     }
     /* Firefox 专属设置 */
     .custom-scrollbar {
       scrollbar-width: thin;
       scrollbar-color: #ccc #f0f0f0;
     }
     

这样处理后，不管内容怎么水平滚动，垂直滚动条都会稳稳固定在模态框的右侧，不会跟着内容跑啦。

内容的提问来源于stack exchange，提问作者Nick Buzzy