Адаптивное появление стрелки при пркрутки меню

Question

Описание

Всем привет. Есть боковое меню в правой части экрана. В нем много кнопок, ссылок и объектов которые так же могут содержать кнопки. В связи с дизайном сайта было скрыто полоса прокрутки, так, что теперь тому кто смотрит на сайт не сразу заметно что можно листать боковое меню. И поэтому решил поставить стрелку в боковом меню, так, чтобы, если его можно листать то оно отобразилось и наоборот - скрылось если мы дошли до конца.

Вопрос

Как все это реализовать с помощью javascript?
Спасибо!

Answer 1

Смотреть на полный экран.

В FF чекбокс пока не работает (:has), но к ответу на вопрос он не относится.

document.querySelector('button').addEventListener('click', e => {
  document.querySelector('nav').scrollTop += 70;
})

* {
  box-sizing: border-box;
}

html, body, main, aside {
  height: 100%;
  overflow: hidden;
}

body:has(:checked) {
  height: 10em;
  border-bottom: 1px solid red;
}

body {
  margin: 0;
  padding: 1em;
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 25%;
}

main > * {
  height: 100%;
  overflow: auto;
}

nav {
  max-height: 100%;
  overflow: auto;
  display: grid;
  gap: .5em;
  align-content: start;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

nav::-webkit-scrollbar {
  display: none;
}

a {
  line-height: 2em;
  padding: 0 .5em;
  background: silver;
}

a:hover {
  background: antiquewhite;
}

aside {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  container-type: size;
}

aside > * {
  width: 100%;
}

.down {
  height: 1px;
  position: relative;
}

button {
  position: absolute;
  inset: auto .5em .5em auto;
  width: 2em;
  height: 2em;
  line-height: 2em;
  border: 1px solid black;
  background: #444;
  color: white;
  border-radius: 50%;
  margin: 0 auto;
  transform: translate(-100cqi, 100cqb);
  cursor: pointer;
}

<main>
  <div>
    <p><label><input type="checkbox"> Limit height by 10em</label>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos praesentium porro quaerat consequatur reiciendis voluptatem repudiandae accusamus corrupti ipsam odit maxime eum debitis, neque nostrum fuga error facere animi at.
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos praesentium porro quaerat consequatur reiciendis voluptatem repudiandae accusamus corrupti ipsam odit maxime eum debitis, neque nostrum fuga error facere animi at.
  </div>
</main>

<aside>
  <nav>
    <a href="#">First</a>
    <a href="#">Second</a>
    <a href="#">Third</a>
    <a href="#">Fourth</a>
    <a href="#">Fifth</a>
    <a href="#">Sixth</a>
    <a href="#">Seventh</a>
  </nav>
  <div class="down">
    <button>V</button>
  </div>
</aside>

БЛОГ НА HUSL

Адаптивное появление стрелки при пркрутки меню

Описание

Вопрос

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