Подсказка пользователю о скролле блока

Question

Есть блок на странице с горизонтальным скроллом:

.container {
  width: 414px;
  height: 700px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: #EFF5FB;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.scroll {
  overflow-x: auto;
}
.content {
  width: 700px;
  height: 150px;
  margin-left: 15px;
  background-color: #CED8F6;
  border: 1px solid black;
  cursor: pointer;
  padding: 15px;
}

<div class="container">
  <div class="scroll">
    <div class="content">
      <p>Содержимое</p>
    </div>
  </div>
</div>

Сам горизонтальный скролл я скрываю, и по сути пользователь если сам не догадается пальцем блок с содержимым в примере потянуть влево, он никогда не узнает, что блок можно вытянуть и просмотреть содержимое полностью. Какие есть варианты что-бы подсказать пользователю, что блок движется? (кроме горизонтального скроллбара) Я вешал анимацию "двигающегося горизонтально" блока, но она работает даже когда сам блок уже скроллит пользователь. Не вариант в общем... В любом случае, любые варианты рассмотрю. Загуглить пытался, но результата не получил, не могу сформулировать правильно запрос :\
Решения любые, css, js, jquery, все будут полезными. Ссылки на ресурсы с такими решениями тоже.

Answer 1

Чтобы спрятать подсказку при скролле скрипт запоминает изначальную позицию скролла по горизонтали.
Далее если она не совпадает при скролле, что естественно, то мы удаляем подсказку и снимаем обработчик, ибо он нам больше не нужен.

let scroll = document.querySelector('.scroll'),
    cur = scroll.scrollLeft || 0, // Текущая позиция скролла
    event = function(e) {
  if(e.currentTarget.scrollLeft !== cur) { // Если скролл не равен текущей позиции, то
    document.querySelector('.scroll-helper').remove(); // Удаляем блок
    scroll.removeEventListener('scroll', event); // И удаляем ивент
  }
}

scroll.addEventListener('scroll', event);

.container {
  width: 414px;
  height: 300px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: #EFF5FB;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.scroll {
  overflow-x: auto;
}

.content {
  width: 700px;
  height: 150px;
  margin-left: 15px;
  background-color: #CED8F6;
  border: 1px solid black;
  cursor: pointer;
  padding: 15px;
  position: relative;
}

.scroll-helper {
  display: block;
  width: 40px;
  height: 40px;
  background: url('//i.imgur.com/iplrzf9.png') no-repeat center center / contain;
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translate(0, -50%);
  animation: sh 2s linear infinite;
  pointer-events: none;
}

@keyframes sh {
  25% {transform: translate(-100%, -50%);}
  75% {transform: translate(100%, -50%);}
}

<div class="container">
  <div class="scroll">
    <div class="content">
      <p>Содержимое</p>
      <div class="scroll-helper"></div>
    </div>
  </div>
</div>

Вот аналогичный вариант, но для нескольких блоков с горизонтальным скроллом.

let scroll = document.querySelectorAll('.scroll'),
    event = function(e) {
      if(e.currentTarget.scrollLeft !== Number(e.target.getAttribute('data-scroll'))) { // Если скролл не равен текущей позиции, то
        e.target.querySelector('.scroll-helper').remove(); // Удаляем блок
        e.target.removeEventListener('scroll', event); // И удаляем ивент
      }
    }


scroll.forEach(function(e){
    e.setAttribute('data-scroll', e.scrollLeft || 0) // Текущая позиция скролла
    e.addEventListener('scroll', event);
});

.container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: #EFF5FB;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.scroll {
  overflow-x: auto;
}

.content {
  width: 700px;
  height: 150px;
  margin-left: 15px;
  background-color: #CED8F6;
  border: 1px solid black;
  cursor: pointer;
  padding: 15px;
  position: relative;
}

.scroll-helper {
  display: block;
  width: 40px;
  height: 40px;
  background: url('//i.imgur.com/iplrzf9.png') no-repeat center center / contain;
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translate(0, -50%);
  animation: sh 2s linear infinite;
  pointer-events: none;
}

@keyframes sh {
  25% {transform: translate(-100%, -50%);}
  75% {transform: translate(100%, -50%);}
}

<div class="container">
  <div class="scroll">
    <div class="content">
      <p>Содержимое</p>
      <div class="scroll-helper"></div>
    </div>
  </div>
  
  <div class="scroll">
    <div class="content">
      <p>Содержимое</p>
      <div class="scroll-helper"></div>
    </div>
  </div>
  
  <div class="scroll">
    <div class="content">
      <p>Содержимое</p>
      <div class="scroll-helper"></div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Подсказка пользователю о скролле блока

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