Как установить положение по умолчанию прокручиваемого DIV?

Question

Я использую scroll-snap-type, чтобы перемещаться по DIV и отображать их. То, что я хочу сделать, это установить представление для 2-го DIV по умолчанию, поэтому, когда страница загружает div с «Это должно быть просмотрено по умолчанию», видно, а затем пользователь может прокручивать влево или вправо.

Как я могу сделать это только с помощью CSS? (без JS)

https://jsfiddle.net/2hcgoL1b/2/

html, body, .holster {
  height: 100%;
}


.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}


/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}


.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}






/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>1</div>
  <div>This should be viewed by default</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 1

Вам понадобится атрибут javascript, tabindex и CSS id, здесь не помогут :

отказ от ответственности это будет раздражатьдля ваших посетителей, таких как был старый трюк <div tabindex="0" autofocus="autofocus">

window.onload= document.getElementById("focus").focus();

/* setup */
html, body, .holster {
  height: 100%;
}


.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}


/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}


.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}






/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>1</div>
  <div tabindex="0" id="focus">This should be viewed by default</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

, чтобы элемент мог получить фокус, если это не ссылка или элемент формы, потребуется атрибут.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Глобальный атрибут tabindex указывает, что его элемент может быть сфокусирован и где он участвует в последовательной навигации по клавиатуре (обычно с клавишей Tab, отсюда и название).

Примечание: если элемент имеет id, вы сможете связать его: http://site.html#MyId