Question 184115 in Html Question posted in
Some basic documentation can be found here.

Html – How to position scrollbar of a fixed div with overflow scroll

my questions is actually about positioning the scrollbar of a fixed element
I tried mocking by setting some border-left: 50% bgColor; etc… but it didn’t help much cause I had t ogive my main fixed div a border-radius which is being included in my radius etc

To be more clear this is the design I’m trying to get
enter image description here

I can mock it by creating another element and setting it’s scroll position the same as of my main box, but I would prefer a CSS solution

Tags:

2

Answers


  1. 0

    To position the scrollbar for a fixed <div> element with overflow: scroll, you can use CSS to specify the dimensions and set position: fixed.

    Login or Signup to reply.
  2. 0

    Style the scrollbar with css and add a negative margin. The starting point:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: lightgray;
  font-family: sans-serif;
}

.filter {
  position: fixed;
  top: 12px;
  left: 12px;
  width: min(280px, calc(100% - 2 * 12px));
  height: min(320px, calc(100% - 2 * 12px));
  border-radius: 12px;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
}

.filter:after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 12px;
  background-image: linear-gradient(to top, #f2f2f2, transparent);
  pointer-events: none;
  border-radius: 0 0 12px 12px;
}

.filter-head {
  padding: 12px;
  position: relative;
  border-bottom: solid 1px #999;
  flex: none;
}

.filter-head:after {
  content: '';
  position: absolute;
  inset: calc(100% + 1px) 0 auto;
  height: 12px;
  background-image: linear-gradient(to bottom, #f2f2f2, transparent);
  pointer-events: none;
}

.filter-body {
  overflow-y: auto;
  min-height: 1px;
  margin-right: -20px;
  padding: 12px 24px 12px 12px;
}

.filter-body::-webkit-scrollbar {
  width: 20px;
  border-radius: 40px;
}
.filter-body::-webkit-scrollbar-track {
  background-color: #f2f2f2;
  border-radius: 40px;
  border: solid 8px transparent;
  background-clip: padding-box;
}
.filter-body::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 40px;
  border: solid 8px transparent;
  background-clip: padding-box;
}
    <section class="filter">
  <header class="filter-head">
    <h4>Filter</h4>
  </header>
  <div class="filter-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, reprehenderit amet molestias iusto sequi velit architecto eveniet maxime distinctio non enim eaque beatae alias placeat aliquam recusandae autem voluptatem mollitia qui nemo. Vitae, unde, animi, repellat voluptates aut ex quae nam quisquam totam nulla autem sunt labore quas voluptatibus hic id odit fuga aliquam modi expedita fugit incidunt officia. Dicta, minus, impedit veniam doloremque quaerat accusantium laborum praesentium repellat. Quod quibusdam in corporis deleniti. Iusto, beatae recusandae animi dicta facere.
  </div>
</section>

    P.S. Can I use

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search