制作叠加滚动条？

Question

是否可以制作覆盖滚动条？

基本上，我有一个父div，其中有子div。我想将垂直滚动条覆盖在子div的顶部，而不是滚动条占据父div中的空间并将子div推到左侧。

我打算使滚动条透明，并且仅在父div悬停时显示它。

仅CSS可能吗？还是需要JavaScript？请帮助谢谢

Answer 1

我为您提供解决方案。尝试下面给出的代码。并且不要忘记使用此标记将simplescrollbar.js脚本放入代码中。 <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>

let scrollDiv = document.querySelector(".area");
SimpleScrollbar.initEl(scrollDiv);

body {
  padding: 2rem;
  background: #eee;
}

.area {
  position: relative;
  background: white;
  height: 250px;
  overflow: hidden;
}

.ss-wrapper {
    overflow : hidden;
    height   : 100%;
    position : relative;
    z-index  : 1;
    float: left;
}

.ss-content {
    height          : 100%;
    width           : 100%;
    position        : relative;
    right           : -18px;
    overflow        : auto;
    -moz-box-sizing : border-box;
    box-sizing      : border-box;
}

.ss-scroll {
  position            : relative;
  background          : rgba(0, 0, 0, .1);
  width               : 9px;
  border-radius       : 4px;
  top                 : 0;
  z-index             : 2;
  cursor              : pointer;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.ss-container:hover .ss-scroll {
  opacity: 1;
}

.ss-grabbed {
     user-select: none;
     -o-user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
}

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>

<div class="area" ss-container>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed cum quisquam sapiente ab consequatur natus ducimus obcaecati minus rerum adipisci laudantium debitis, perferendis pariatur iste provident dolorum ratione voluptate, repudiandae placeat inventore amet quasi ea facere? Delectus numquam vel inventore quasi excepturi. Minus nulla dolore ad animi pariatur provident assumenda dolorum voluptatem porro harum quo aspernatur error placeat sapiente, magnam, atque id molestiae dignissimos corrupti nobis doloremque iure. Voluptate nulla itaque vitae provident, voluptatem numquam sequi suscipit ducimus similique quidem, neque minima architecto tempore asperiores, nihil quae ratione dicta quia unde consectetur tenetur! Aspernatur eveniet dolorem nesciunt sint et eligendi enim quidem blanditiis tenetur! Blanditiis non modi amet, quaerat, vitae consectetur placeat porro dicta, ipsum natus ea possimus. Odio magni possimus modi nemo doloribus corrupti tempora. Aliquid eos error modi non repudiandae illum atque voluptatibus? Odio quod placeat facere sed eligendi, adipisci commodi natus magni soluta dignissimos, aperiam fuga magnam saepe itaque voluptas optio fugiat veritatis velit architecto dolore animi cum sequi quas accusantium! Vel iusto autem sit rerum maxime. Blanditiis libero natus at necessitatibus, odio sed perspiciatis exercitationem quisquam, officiis impedit, a nobis. Exercitationem hic reprehenderit illo, laboriosam ab eaque error sequi, ea expedita rem possimus repellendus numquam delectus est cum maiores neque nihil natus eius. Expedita esse quae, minus, est aspernatur ratione sed aliquid odio ut architecto nostrum provident neque placeat tempora, ipsum natus eum repellendus debitis alias nobis dolorem doloremque laboriosam voluptatem similique. Quisquam rerum molestias ab voluptas voluptatum sit, tenetur odio. Quidem nesciunt assumenda molestias velit harum deserunt culpa vitae beatae veritatis, eum, soluta mollitia numquam cumque! Facilis, dolores sunt aperiam sint molestias iure quidem architecto provident natus quae ab, quia labore tempore minima aliquid voluptatem earum optio tempora. Optio placeat eligendi praesentium quos atque. Similique aliquid neque nisi aliquam molestiae natus, recusandae ullam tempora et minus cum repellat cupiditate fugiat dolorem blanditiis consectetur ea commodi, maxime, odit voluptate hic non ab eaque? Eos exercitationem cumque quas harum aut deserunt ipsam cupiditate doloribus dolorum non doloremque adipisci est, explicabo mollitia voluptates laboriosam molestiae sapiente at ex laborum id? Voluptatem nostrum dicta, tempore eaque quibusdam praesentium fugiat laborum odio nemo adipisci, impedit porro iste, aut sunt consectetur soluta quia nisi repudiandae voluptatibus expedita ab rem iure. Dolorem nemo eaque architecto atque nihil, consequatur voluptates? Consequuntur vero a repudiandae molestias repellat provident minima facilis placeat, perferendis quo laudantium quisquam tenetur fugiat! Vitae repellat ducimus officia. Similique quod sunt quaerat, eum at esse iste. Pariatur sit animi mollitia! Molestiae, quia voluptatum? Expedita, voluptas explicabo. Rerum soluta dolorem expedita optio nostrum ex placeat laudantium minima voluptate, cum neque beatae, pariatur dicta error rem eum aliquam a deleniti quidem doloremque iure aperiam illo atque animi! Soluta facilis eligendi iure magnam. Quasi, quam numquam explicabo quas aliquam cum natus quod iusto, eligendi tenetur ex facilis, modi ut accusantium quibusdam nostrum labore! Provident laborum dolore ipsa sit. Dolore totam tempore quisquam adipisci iste tenetur ducimus saepe quae asperiores quibusdam possimus, maxime voluptatibus non eum praesentium quas dolores similique fugiat placeat numquam illum omnis autem voluptatum! Impedit exercitationem quam quisquam nisi consectetur minima optio dolore dicta! Maxime qui fugiat, beatae possimus modi fuga, unde, adipisci culpa magnam eum a velit. Voluptas libero eos dolores consequuntur nisi corrupti vel rem doloremque ut consequatur, odit magni esse aliquid aperiam possimus eveniet, magnam quaerat exercitationem. Maiores cum officiis reprehenderit ea nam, iure magni esse quos velit praesentium eius unde, laudantium fugit vitae quasi temporibus. Iste fuga iure numquam velit culpa exercitationem officia quis beatae? Deserunt sint eum accusantium, blanditiis fugit harum ex omnis qui officiis magnam nobis eius voluptatibus tenetur, rem dignissimos aut et tempore ipsum cumque commodi laudantium? Maxime praesentium, alias dolores, eos veritatis velit ex ut aliquam tempore est corporis dolorem. Odio, rem ratione. Numquam repellat cum rerum libero sapiente itaque corrupti in ut nihil culpa vitae, laborum molestias nostrum repudiandae eligendi sequi quo officia quibusdam modi commodi consequuntur nisi nobis vero voluptates. Praesentium officia rerum a incidunt ratione, odio quaerat alias, optio repellendus doloremque natus vero quae debitis dolores dignissimos voluptas labore accusantium aliquam asperiores ut eius dolorem. Dolor assumenda at deserunt numquam atque delectus labore, eum, aut dolorem ex, et hic vel rerum fugit! Et tempore harum natus illum dicta maxime magnam delectus ad praesentium reprehenderit nihil nulla aliquid error, fuga ratione dignissimos cumque temporibus blanditiis. Eum doloribus sed odit exercitationem quia quibusdam vero impedit id harum molestias! Distinctio iusto aspernatur quaerat tempora pariatur iste eaque corrupti, vel magnam temporibus recusandae possimus perspiciatis itaque repellat mollitia reprehenderit hic autem quis ex maxime laborum exercitationem placeat ab. Saepe provident incidunt, modi porro aut magni ducimus odit ut minima perferendis, itaque nobis rem explicabo dolor. Voluptates dicta in error nulla vitae corporis fugiat optio. Blanditiis voluptatem sunt nihil? Nihil, dicta excepturi explicabo repellendus enim odio sed totam, fugit error nulla provident omnis saepe illum iste animi? Consequatur, veniam! Voluptates voluptatem veritatis reiciendis. Illo, veritatis pariatur ratione id minima cupiditate. Quibusdam quod deserunt alias ipsam culpa et modi fuga aut id autem. Minima neque nesciunt eligendi accusamus quam deserunt repellendus sequi culpa, cumque quaerat beatae mollitia doloribus? Nisi quibusdam quisquam temporibus. Quas laudantium pariatur totam, voluptas tempora, ad culpa dignissimos blanditiis ut, explicabo voluptatem repellat saepe tempore ipsam? Qui adipisci labore mollitia at, id facere unde aspernatur? Quis numquam a reiciendis vero possimus ut autem. Voluptatibus quas, officiis hic mollitia vero unde iste dolores delectus molestias. Perspiciatis, sit dicta officiis facere minus voluptatem qui iusto est nulla neque perferendis non ipsum minima ipsa quidem consequatur delectus. Ducimus qui quaerat nostrum nulla quis veritatis! Labore quod illo, debitis necessitatibus, repellendus omnis vitae voluptas sequi quia consequuntur velit asperiores sint porro fuga facilis vel voluptatum magni quibusdam delectus quis distinctio? Excepturi tenetur doloremque dolor. Nostrum voluptates harum quis quidem hic odit magni atque repudiandae illum, repellat et explicabo a possimus nesciunt tempore rerum sequi, blanditiis officiis. Error ullam quae labore veritatis eaque reiciendis tempore doloremque quod dignissimos optio tempora perspiciatis, voluptatum non? Animi mollitia dolorem quae impedit quos laudantium perferendis, dolore ut consectetur deserunt veritatis deleniti ipsa excepturi!
</div>