使用CSS和/或JQuery使滚动条成为元素的一部分？

Question

我有一个基本的webkit滚动条设置，使我的应用程序使用比基本浏览器更滚动的滚动条。

.k-scheduler-content::-webkit-scrollbar {
        width: 8px;
    }

    .k-scheduler-content::-webkit-scrollbar-track {
        display:none;
    }

    .k-scheduler-content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(128,128,128, 0.6);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

但是，我希望滚动条显示在可滚动元素的顶部。不要将它推过8px并占据它旁边的空白区域。

此图像显示了我所追求的内容（滚动条是元素的一部分。它在那里，但不会移动或改变元素的宽度）：

这就是我现在所拥有的（我摆脱了轨道，但滚动条仍然占用空间并将元素推过来为其宽度腾出空间）：

是否可以使用CSS / JQuery？

**我不能使用任何额外的插件。我找到了JQuery NiceScroll，它完全符合我的要求并且非常容易使用。然而，它开始对我的应用程序产生奇怪的负面影响，我最近确认基于脚本的滚动条插件确实有机会对我正在使用的框架产生负面影响，因为它们改变了DOM和我正在制作的小部件不处理得好。

Answer 1

希望this可以让你走上正轨。可悲的是，我不知道如何让它只在你滚动时出现。

<div class="container">
  <div class="scroll-box">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

.container {
  margin: 0 auto;
  max-width: 600px;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.scroll-box {
  margin-right: -8px;
}

.container::-webkit-scrollbar {
  width: 8px;
  opacity: 0;
}

.container::-webkit-scrollbar-track {
  display: none;
}

.container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: transparent;
  -webkit-box-shadow: none;
}

.container:hover::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.6);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}