如何使滚动条覆盖内容 [英] how to make scroll bar overlay content

问题描述

如何获取滚动条以覆盖div内容?

How do I get the scrollbar to overlay div content?

已经尝试使用具有透明背景的 track ，但是不起作用

already tried to use track with transparent background, but it does not work

::-webkit-scrollbar-track {background: transparent}

保持不变，占据内容的一部分

remains the same, occupying part of the content

.faq-body {
  width: 250px;
  height: 400px;
  background: #fff;
  overflow: scroll;
  border: 1px solid #7b7d7f;
}

.faq-body::-webkit-scrollbar {
  width: 16px;
}
.faq-body::-webkit-scrollbar-thumb {
  background-color: #7b7d7f;
  border: 5px solid #fff;
  border-radius: 10rem;
}
.faq-body::-webkit-scrollbar-track {
  position: absolute;
  right: -3rem;
  top: -50rem;
  background: transparent;
}

.faq-question {
  padding: 20px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
  color: #15191b;
  font-size: 0.8rem;
}

<div class="faq-body">
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
  </div>

有人可以帮助我吗?

推荐答案

有两种方法可获得相似的结果:

There are two ways to get a similar result:

JavaScript库

使用 http://grsmto.github.io/simplebar/

https://jsfiddle.net/w0a5Ls6h/

专业版:

• 浏览器兼容性
• 令人满意的结果

缺点:

• 第3个javascript

或

仅CSS

<style>
  .faq-body {
      width: 250px;
      height: 400px;
      background: #fff;
      overflow-y: scroll;
      border: 1px solid #7b7d7f;
    }

    .faq-body::-webkit-scrollbar {
      width: 7px;
    }
    .faq-body::-webkit-scrollbar-thumb {
      background-color: rgba(0,0,0,0.4);
      border-radius: 10rem;
      border: 1px solid #fff;
    }


    .faq-body::-webkit-scrollbar-track-piece:start {
      background: transparent;
    }

    .faq-body::-webkit-scrollbar-track-piece:end {
      background: transparent;
    }
    .faq-question {
      padding: 20px;
      border-bottom: 1px solid #000;
      line-height: 1.3;
      color: #15191b;
      font-size: 0.8rem;
    }
</style>

缺点:

• 浏览器兼容性
• 结果相似但不令人满意

这篇关于如何使滚动条覆盖内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！