0

我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>

4

1 回答 1

0

您将需要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

于 2019-10-27T13:58:38.823 回答