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

Question

我正在使用 scroll-snap-type 在 DIV 中移动并将它们放入 View 中。我想要做的是默认将 View 设置为第二个 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属性和 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>

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

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 ，您应该能够链接它:http://site.html#MyId