能否将滚动条置于布局外部？自定义滚动条实现方案咨询

我希望将滚动条放置在布局外部，达到图2所示的效果。目前已编写如下自定义滚动条CSS代码：

.notification-container>div{
scrollbar-color: #CFD8DC #FFFFFF;
scrollbar-width: thin;}

    .notification-container>div::-webkit-scrollbar-track
{
    background-color: #FFFFFF;
}

.notification-container>div::-webkit-scrollbar
{
    width: 4px;
    background-color: #FFFFFF;
}

.notification-container>div::-webkit-scrollbar-thumb
{
    background-color: #CFD8DC;
}

当前效果如图1所示，请问是否可通过自定义滚动条或插件实现该需求？

可行，两种方案可以实现： #

一、原生CSS实现（无需额外插件） #

通过调整容器布局和滚动条样式就能实现，核心是让滚动条脱离原容器的边界：

• 调整容器结构样式
  给外层的.notification-container设置padding-right（值要大于你设置的滚动条宽度，比如设为12px），同时开启overflow: hidden避免容器整体出现滚动；让内部滚动的子元素宽度设为calc(100% + 12px)，超出容器的部分会把滚动条推到容器的padding区域，视觉上就像在布局外部。

• 适配滚动条样式
  把滚动条轨道的背景色改成和容器外部的背景色一致，这样滚动条就能和外部背景融合，看起来完全在布局外。调整后的完整CSS参考：

  .notification-container {
    overflow: hidden;
    padding-right: 12px; /* 预留滚动条的位置 */
    /* 保留你原有的容器其他样式 */
  }
  
  .notification-container>div {
    scrollbar-color: #CFD8DC #外部背景色; /* 替换成实际的外部背景色 */
    scrollbar-width: thin;
    width: calc(100% + 12px); /* 让子元素宽度超出容器 */
    max-height: 300px; /* 替换成你需要的容器高度 */
    overflow-y: auto;
  }
  
  /* WebKit内核浏览器（Chrome、Safari等）适配 */
  .notification-container>div::-webkit-scrollbar-track {
    background-color: #外部背景色;
  }
  
  .notification-container>div::-webkit-scrollbar {
    width: 4px;
    background-color: #外部背景色;
  }
  
  .notification-container>div::-webkit-scrollbar-thumb {
    background-color: #CFD8DC;
  }
  

二、插件方案（适合复杂布局场景） #

如果原生CSS调整后效果达不到预期，可以使用自定义滚动条JS插件。这类插件可以完全控制滚动条的渲染位置，你只需要配置插件将滚动条挂载到容器外部的指定节点，就能精准实现图2的效果。

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