如何将页面中间列的滚动条固定到屏幕右侧边缘？

要实现你要的效果——三列布局、中间列长内容独立滚动、滚动条在屏幕最右侧且不影响左右列，核心是让中间列的滚动容器占满视口高度，同时把滚动条的视觉位置拉到屏幕边缘，左右列固定不滚动。下面是具体实现方法：

方法一：JS同步滚动+自定义滚动条（兼容性好） #

这种方式能兼容绝大多数浏览器，步骤如下：

1. 搭好三列布局骨架
   用Flex做基础布局，左右列设固定宽度，通过sticky固定在视口内，不会跟着滚动：

   .container {
     display: flex;
     width: 100%;
   }
   .left-col, .right-col {
     width: 200px;
     position: sticky;
     top: 0;
     height: 100vh;
     background: #f5f5f5;
   }
   .middle-col {
     flex: 1;
     /* 不要直接给中间列加overflow，给内部内容容器加 */
   }
   

2. 中间列的滚动容器设置
   给中间列的内容套一个容器，让它占满视口高度并开启滚动，同时隐藏自带的滚动条：

   .middle-content {
     height: 100vh;
     overflow-y: auto;
     /* 隐藏各浏览器默认滚动条 */
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE/Edge */
   }
   .middle-content::-webkit-scrollbar {
     display: none; /* WebKit内核浏览器 */
   }
   

3. 自定义滚动条并同步滚动逻辑
   先在页面添加自定义滚动条元素：

   <div class="custom-scrollbar">
     <div class="scroll-thumb"></div>
   </div>
   

   给滚动条加样式固定在屏幕右侧：

   .custom-scrollbar {
     position: fixed;
     top: 0;
     right: 0;
     width: 8px;
     height: 100vh;
     background: #eee;
     border-radius: 4px;
   }
   .scroll-thumb {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     background: #999;
     border-radius: 4px;
     cursor: pointer;
   }
   

   最后用JS同步内容滚动与滚动条位置，同时支持鼠标拖动滚动条：

   const content = document.querySelector('.middle-content');
   const scrollThumb = document.querySelector('.scroll-thumb');
   const scrollBar = document.querySelector('.custom-scrollbar');
   
   // 内容滚动时更新滚动条位置
   content.addEventListener('scroll', updateScrollThumb);
   
   // 更新滚动条位置的核心函数
   function updateScrollThumb() {
     const scrollRatio = content.scrollTop / (content.scrollHeight - content.clientHeight);
     const thumbHeight = (content.clientHeight / content.scrollHeight) * scrollBar.clientHeight;
     scrollThumb.style.height = `${thumbHeight}px`;
     scrollThumb.style.top = `${scrollRatio * (scrollBar.clientHeight - thumbHeight)}px`;
   }
   
   // 鼠标拖动滚动条逻辑
   let isDragging = false;
   scrollThumb.addEventListener('mousedown', (e) => {
     isDragging = true;
     document.addEventListener('mousemove', handleDrag);
     document.addEventListener('mouseup', () => {
       isDragging = false;
       document.removeEventListener('mousemove', handleDrag);
     });
   });
   
   function handleDrag(e) {
     if (!isDragging) return;
     const scrollRatio = (e.clientY - scrollBar.offsetTop) / scrollBar.clientHeight;
     content.scrollTop = scrollRatio * (content.scrollHeight - content.clientHeight);
   }
   

方法二：纯CSS技巧（限WebKit内核浏览器） #

如果只需要兼容Chrome、Safari这类WebKit浏览器，可以直接用滚动条绝对定位的技巧，无需JS：

.container {
  display: flex;
  width: 100%;
}
.left-col, .right-col {
  width: 200px;
  position: fixed;
  top: 0;
  height: 100vh;
  background: #f5f5f5;
}
.left-col { left: 0; }
.right-col { right: 8px; } /* 避开滚动条宽度 */
.middle-col {
  flex: 1;
  margin: 0 200px; /* 给左右列预留位置 */
  position: relative;
  height: 100vh;
  overflow-y: auto;
}
/* 把中间列的滚动条定位到屏幕右侧 */
.middle-col::-webkit-scrollbar {
  position: absolute;
  right: -200px; /* 数值等于右侧列宽度，刚好移到屏幕边缘 */
  top: 0;
  bottom: 0;
  width: 8px;
}
.middle-col::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 4px;
}

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