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

Question

我使用scroll-snap-type来浏览DIVs并将它们放到视图中。我想要做的是在默认情况下将视图设置为第二个DIV，所以当页面加载带有“在默认情况下应该查看”的div时，用户就可以向左或向右滚动。

我怎么才能用CSS来完成这个任务呢？(没有联合来文)

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

tabindex全局属性指示其元素可以聚焦，并参与顺序键盘导航(通常使用Tab键，因此名称)。

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