Горизонтальная полоса прокрутки прилипает к нижней части

#html #css #scrollbar #horizontal-scrolling

#HTML #css #полоса прокрутки #горизонтальная прокрутка

Вопрос:

Я ищу решение для горизонтальной полосы прокрутки с липким дном. На просмотре есть огромная таблица, и я не хотел давать ей фиксированную высоту, поэтому у нас будет вертикальная полоса прокрутки на уровне страницы, но я задал фиксированную ширину, поэтому будет горизонтальная полоса прокрутки на уровне сетки.

Проблема в том, что я не хочу опускаться ниже, чтобы использовать горизонтальную полосу прокрутки, я ищу решение, чтобы сделать горизонтальную полосу прокрутки прикрепленной к нижней части представления.

1. предоставьте некоторый код, который поможет вам, это необходимо

2. проверьте пример @FedericoMigueletto codepen.io/devashishg/pen/zYKXjYm Я не хотел прокручивать страницу вниз, чтобы получить доступ к горизонтальной прокрутке, я хотел, чтобы полоса прокрутки была прикреплена к нижней части

Ответ №1:

Я нахожу обходной путь, используя пользовательскую полосу прокрутки. оформить заказ здесь, https://codepen.io/devashishg/pen/oNzREaw

 const $scroller = document.getElementById("scroller");
const $containers = document.getElementById("container_body");
const $wrapper = document.getElementById("wrapper");
let ignoreScrollEvent = false;
animation = null;
const scrollbarPositioner = () => {
  const scrollTop = document.scrollingElement.scrollTop;
  const wrapperTop = $wrapper.offsetTop;
  const wrapperBottom = wrapperTop   $wrapper.offsetHeight;

  const topMatch = window.innerHeight   scrollTop >= wrapperTop;
  const bottomMatch = scrollTop <= wrapperBottom;

  if (topMatch amp;amp; bottomMatch) {
    const inside =
      wrapperBottom >= scrollTop amp;amp;
      window.innerHeight   scrollTop <= wrapperBottom;

    if (inside) {
      $scroller.style.bottom = "0px";
    } else {
      const offset = scrollTop   window.innerHeight - wrapperBottom;

      $scroller.style.bottom = offset   "px";
    }
    $scroller.classList.add("visible");
  } else {
    $scroller.classList.remove("visible");
  }

  requestAnimationFrame(scrollbarPositioner);
};
requestAnimationFrame(scrollbarPositioner);
$scroller.addEventListener("scroll", (e) => {
  if (ignoreScrollEvent) return false;
  if (animation) cancelAnimationFrame(animation);
  animation = requestAnimationFrame(() => {
    ignoreScrollEvent = true;
    $containers.scrollLeft = $scroller.scrollLeft;
    ignoreScrollEvent = false;
  });
});
$containers.addEventListener("scroll", (e) => {
  if (ignoreScrollEvent) return false;
  if (animation) cancelAnimationFrame(animation);
  animation = requestAnimationFrame(() => {
    ignoreScrollEvent = true;
    $scroller.scrollLeft = $containers.scrollLeft;
    ignoreScrollEvent = false;
  });
});

 .long {
  width: 1550px;
}

#container_body {
  overflow: hidden;
  padding-bottom: 20px;
}

#scroller {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: scroll;
  display: none;
}

#scroller.visible {
  display: block;
}

#scroller .long {
  height: 1px;
}

 Hello<br/>
<div id="wrapper">
    <div id="container_body">
      <div class="long"> Long text</div>
      Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />Long text
      <br />A. Long text
      <br />
    </div>
    <div id="scroller">
      <div class="long">
      </div>
    </div>
</div>
Bye

Развернуть фрагмент

пожалуйста, поделитесь любым альтернативным решением, если оно у вас есть.

Ответ №2:

Вы можете использовать их для создания пользовательской полосы прокрутки. Вы также можете расположить ее так, как хотите.

 ::-webkit-scrollbar {
    /* style it here */
}

::-webkit-scrollbar-button {
    /* style it here */
}

::-webkit-scrollbar-track {
    /* style it here */
}

::-webkit-scrollbar-track-piece {
    /* style it here */
}

::-webkit-scrollbar-thumb {
    /* style it here */
}

::-webkit-scrollbar-corner {
    /* style it here */
}