Блог

Главная - Вопросы по программированию - Запретить прокрутку div на вкладке и фокусировку

Запретить прокрутку div на вкладке и фокусировку

#html #scroll #intersection-observer

Вопрос:

 .container {
  display: flex;
  gap: 10px;
  width: 300px;
  overflow: scroll;    
}

.card {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  flex: 0 0 100px;

} 
 <div class="container">
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
  </div>

У меня есть div, который прокручивается горизонтально. Каждый элемент имеет определенный фокусируемый элемент, такой как кнопка. Я программно прокручиваю div, когда это необходимо, и хочу предотвратить автоматическую прокрутку div, когда пользователь просматривает элементы.
Есть ли простой способ предотвратить это?
Один из вариантов, о котором я думаю, состоит в том, чтобы использовать наблюдатель пересечений и установить скрытую видимость для элементов за пределами прокрутки, чтобы вкладка не переходила к этим элементам. Есть ли какой-нибудь другой простой способ?

CSS

 .container {
  display: flex;
  gap: 10px;
  width: 300px;
  overflow: scroll;    
}

.card {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  flex: 0 0 100px;
  
}

HTML

   <div class="container">
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
    <div class="card">
      <button>Click Me</button>
    </div>
  </div>

Нажмите на первую кнопку и начните закладку, я не хочу, чтобы фокус переходил на карту-4 и прокручивал div.

Комментарии:

1. Затем вы должны установить значение tabindex="-1" на каждый элемент, который вы не хотите фокусировать. Вы не можете предотвратить прокрутку, это поведение по умолчанию и сбило бы пользователя с толку, если бы это было отключено.

Метки: