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

【问题标题】：How to set the default position of a scrollable DIV?如何设置可滚动 DIV 的默认位置？
【发布时间】：2019-10-27 22:15:35
【问题描述】：

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

【问题讨论】：

有一个技巧：<div tabindex="0" autofocus="autofocus"> 但不确定它是否仍然有效。这比帮助更烦人。

标签： css scroll-snap

【解决方案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

【讨论】：