Question

我知道有一些js解决方案，但想知道CSS中是否有简单的东西可以做。我有div设置max-height，但我想将默认位置滚动到div内容的底部而不是div的顶部。这可能吗？

Answer 1

您可以使用输入的属性自动对焦在HTML5中使用可怕的技巧。

这不是CSS，只是HTML。

浏览器支持http://www.wufoo.com/html5/attributes/02-autofocus.html

设置此输入（并隐藏它）您想要在内容中向下滚动，或者使其浮动并带有所需值的margin-top（px，em，vh，任何值/单元）。

您可以在example 下载http://codepen.io/anon/share/zip/YWZyeZ/（带有HTML + CSS 的zip文件，以便自行运行进行测试） CSS和HTML在自动对焦在此处无效的代码段中，它是相同的，因为它不在主文档中但在iframe内。

对于tipycal使用，您可以轻松地将聊天框一直滚动到您聊天的输入文本...

＆＃13;

div {
  margin: 1em;
  border: solid;
  height: 150px;
  overflow: auto;
}

.scrollmedown {
  float: left;
  width: 0;
  border: 0;
  padding: 0;
}

＆＃13;

<div>
  <h1>only works loaded from a real page/uri</h1>
  <p><a href="http://codepen.io/anon/share/zip/YWZyeZ/">donwload zip file from codepen</a>
   <br/><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>
  
  <h3><input autofocus type=text class="scrollmedown">Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>

＆＃13;

用纯CSS设置div的滚动位置？

1 个答案: