如何设置可滚动DIV的默认位置？

Question

我正在使用 scroll-snap-type 浏览 DIV 并将它们放入视图中。我想要做的是默认将视图设置为第二个 DIV，因此当页面加载 div 和 "This should be viewed by default" 时，用户可以向左或向左滚动对。

我如何只使用 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 属性和一个 id ，CSS 在这里没有任何帮助:

免责声明这会让您的访问者感到厌烦，就像老把戏一样<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>

要让元素获得焦点，如果不是link或表单元素，则需要一个属性。

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

The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

注意： 一旦元素具有 id，您应该能够 link 它：http://site.html#MyId

如何设置可滚动DIV的默认位置？

How to set the default position of a scrollable DIV?

css

scroll-snap