diff options
Diffstat (limited to 'files/zh-cn/web/css/scroll-behavior/index.html')
| -rw-r--r-- | files/zh-cn/web/css/scroll-behavior/index.html | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/scroll-behavior/index.html b/files/zh-cn/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..896ef6d6a0 --- /dev/null +++ b/files/zh-cn/web/css/scroll-behavior/index.html @@ -0,0 +1,123 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +tags: + - CSS + - CSS 属性 + - 参考 +translation_of: Web/CSS/scroll-behavior +--- +<div>{{ CSSRef }}</div> + +<p>当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，<a href="/zh-CN/docs/Web/CSS">CSS</a> 属性 <strong><code>scroll-behavior</code></strong> 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。</p> + +<p>{{cssinfo}}</p> + + +<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div> + + + +<p>用户代理可以忽略此属性。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush:css">/* Keyword values */ +scroll-behavior: auto; +scroll-behavior: smooth; + +/* Global values */ +scroll-behavior: inherit; +scroll-behavior: initial; +scroll-behavior: unset; +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>滚动框立即滚动。</dd> + <dt><code>smooth</code></dt> + <dd>滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动，用户代理应遵循其平台的约定，如果有的话。</dd> +</dl> + +<h3 id="正式语法">正式语法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="例子">例子</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><nav> + <a href="#page-1">1</a> + <a href="#page-2">2</a> + <a href="#page-3">3</a> +</nav> +<scroll-container> + <scroll-page id="page-1">1</scroll-page> + <scroll-page id="page-2">2</scroll-page> + <scroll-page id="page-3">3</scroll-page> +</scroll-container></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + display: inline-block; + width: 50px; + text-decoration: none; +} +nav, scroll-container { + display: block; + margin: 0 auto; + text-align: center; +} +nav { + width: 339px; + padding: 5px; + border: 1px solid black; +} +scroll-container { + display: block; + width: 350px; + height: 200px; + overflow-y: scroll; + scroll-behavior: smooth; +} +scroll-page { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font-size: 5em; +} +</pre> + +<h3 id="输出">输出</h3> + +<p>{{ EmbedLiveSample('Example', "100%", 250) }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.scroll-behavior")}}</p> |