Не работает свойство Fixed для элемента в скролле блока

Question

В чем суть, есть блок в котором есть полоса прокрутки, по макету должен стоять кастомный скролл определенного размера, width:5px; height:50px. Так как через -webkit- нельзя изменить вертикальный размер скролла, решил сделать через js:

Для самого скролла установил position:fixed, но он не остается на месте и не движется за контентом

let benefits = document.querySelector(".benefits");
let scrollBen = document.querySelector(".benefits__scroll");
let scrollThumb = scrollBen.querySelector("div");

benefits.addEventListener("wheel", (e) => {
  e.preventDefault();
  if (e.deltaY > 0) {
    if (benefits.scrollTop < benefits.scrollHeight - 600) {
      let i = 0;
      let y = scrollThumb.offsetTop;

      scrollThumb.setAttribute("style", `top:${y+3}px`)
      requestAnimationFrame(function scroll() {
        benefits.scrollTop += 2;
        i++;
        if (i < 20) {
          requestAnimationFrame(scroll)
        }

      })
    }


  } else {
    if (benefits.scrollTop > 0) {

      let i = 0;
      let y = scrollThumb.offsetTop;
      scrollThumb.setAttribute("style", `top:${y-3}px`)
      requestAnimationFrame(function scroll() {
        benefits.scrollTop -= 2;
        i++;
        if (i < 20) {
          requestAnimationFrame(scroll)
        }

      })
    }
  }
})

.benefits {
  transform: translate(30%);
  position: absolute;
  overflow: hidden;
  width: 500px;
  height: 600px;
  background-color: silver;
}

.benefits__scroll {
  position: fixed;
  right: 0;
  top: 181px;
  background-color: rgba(26, 24, 47, 0.15);
  border-radius: 5px;
  width: 5px;
  height: 312px;
}

.benefits__scroll>div {
  position: absolute;
  background: #1A182F;
  border-radius: 5px;
  width: 100%;
  height: 104px;
}

.slider1 {
  width: 80%;
  height: 600px;
  background-color: black;
}

.slider2 {
  width: 80%;
  height: 600px;
  background-color: blue;
}

<div class="benefits">
  <div class="benefits__scroll">
    <div></div>
  </div>
  <div class="slider1"></div>
  <div class="slider2"></div>
</div>

Делаю на чистом JS, так как мои знания пока не настолько большие для изучения фреймворков.

Так же, в макете position:fixed устанавливает сам элемент относительно блока, тут же, устанавливает относительно всего документа, почему?

Answer 1

Вы добавили эту строку — scrollBen.setAttribute("style", top:${yBen+2}px), в следствии всему блоку (.benefits__scroll) назначается top и смещает его вниз:

let benefits = document.querySelector(".benefits");
let scrollBen = document.querySelector(".benefits__scroll");
let scrollThumb = scrollBen.querySelector("div");

benefits.addEventListener("wheel", (e) => {
  e.preventDefault();
  if (e.deltaY > 0) {
    if (benefits.scrollTop < benefits.scrollHeight - 600) {
      let i = 0;
      let y = scrollThumb.offsetTop;

      scrollThumb.setAttribute("style", `top:${y+3}px`)
      requestAnimationFrame(function scroll() {
        let yBen = scrollBen.offsetTop;

        benefits.scrollTop += 2;
        i++;
        if (i < 20) {
          requestAnimationFrame(scroll)
        }

      })
    }


  } else {
    if (benefits.scrollTop > 0) {

      let i = 0;
      let y = scrollThumb.offsetTop;
      scrollThumb.setAttribute("style", `top:${y-3}px`)
      requestAnimationFrame(function scroll() {
        benefits.scrollTop -= 2;
        i++;
        if (i < 20) {
          requestAnimationFrame(scroll)
        }

      })
    }
  }
})

.benefits {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 600px;
  background-color: silver;
}

.benefits__scroll {
  position: fixed;
  right: 0;
  top: 181px;
  background-color: rgba(26, 24, 47, 0.15);
  border-radius: 5px;
  width: 5px;
  height: 312px;
}

.benefits__scroll>div {
  position: absolute;
  background: #1A182F;
  border-radius: 5px;
  width: 100%;
  height: 104px;
}

.slider1 {
  width: 80%;
  height: 600px;
  background-color: black;
}

.slider2 {
  width: 80%;
  height: 600px;
  background-color: blue;
}

<div class="benefits">
  <div class="benefits__scroll">
    <div></div>
  </div>
  <div class="slider1"></div>
  <div class="slider2"></div>
</div>

БЛОГ НА HUSL

Не работает свойство Fixed для элемента в скролле блока

Ответы (1 шт):