Сделайте div активным, не щелкая где-нибудь в нем

#html #css

#HTML #css

Вопрос:

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

Можно ли использовать клавиши непосредственно при первой загрузке страницы, не обязательно нажимая на нее?

Мне нужно, чтобы клавиши со стрелками работали напрямую и запускали горизонтальную прокрутку внутри этого конкретного div, если это возможно.

 .scroll { grid-template-columns: repeat(15,1fr); overflow-x: scroll; scroll-snap-type: x proximity; }

 <ul class="scroll"> <div class="container"> <img src="ok.png"> <div class="inmiddle"> <div class="description"> blablabla</div> </div> </div></li></ul>

1. Пожалуйста, удалите приветствия. Следует ли удалять из сообщений «Привет», «спасибо», слоганы и приветствия?

2. Что вы уже пробовали? Покажите нам свой код.

3. Не здесь, отредактируйте вопрос.

4. Добавлены элементы.

Ответ №1:

вы пытались прослушивать свои ключи через addEventListener ?

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
Вы можете проверить значения ключей на этом веб-сайте.

1. Извините, я не понимаю.

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

3. К сожалению, у меня 0 знаний о JS.

4. Еще раз извините, я не проверял должным образом.

Ответ №2:

Если вы можете просто использовать этот простой JS:

 document.getElementById('scroll').focus();

 <body> 
  <div id="scroll">
    example      
  </div> 
</body>

В противном случае добавьте псевдокласс :active в свой div.

Вы также можете изменить свойства этого псевдокласса по мере необходимости.

Полезная документация

1. Здравствуйте. У меня не работает. Он все еще не активен, и мне нужно навести курсор / щелкнуть div, чтобы стрелки работали.

2. <body> <div id=scroll> вставьте горизонтальную прокрутку здесь, но не занимает всю страницу, только с размером 500 пикселей и высотой 100 пикселей где-нибудь </div> </body> Он будет прокручиваться только с помощью клавиш, когда я нажимаю на div.

3. <body> <div id="scroll" class="current" ></div> </body> и в css поместите что-то вроде этого scroll.current

4. Вы используете Javascript? Bcs, если вы хотите, у меня также есть решение, которое включает некоторый javascript, но это действительно просто

5. Я благодарю вас за ваше время и помощь. К сожалению, у меня 0 знаний в JS. Я попробовал scroll.current безрезультатно.