Skip to content

Commit

Permalink
minor fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
yin1999 committed Jul 29, 2024
1 parent a93e3e0 commit 2d61dac
Showing 1 changed file with 16 additions and 19 deletions.
35 changes: 16 additions & 19 deletions files/zh-cn/web/api/element/scrolltop/index.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,37 @@
---
title: Element.scrollTop
title: ElementscrollTop 属性
slug: Web/API/Element/scrollTop
l10n:
sourceCommit: d80aa2a5a8ef9c2134c39bc48e0e8b0807afc39b
---

{{ APIRef("DOM") }}
{{APIRef("DOM")}}

`Element.scrollTop`属性可以获取或设置元素内容从其顶部边缘滚动的像素数。在现代浏览器中,该值是亚像素精度的,这意味着它不一定是一个整数。
**`Element.scrollTop`** 属性可以获取或设置元素内容从其顶部边缘滚动的像素数。在现代浏览器中,该值是亚像素精度的,这意味着它不一定是一个整数。

##

一个双精度浮点值,表示元素当前从原点垂直滚动的像素数,其中正值表示元素向下滚动(以向底部显示更多内容)。如果元素根本没有向上或向下滚动,则`scrollTop`为 0。如果文档不是活动文档,则返回值为 0。如果文档在亚像素精度设备上呈现,则返回的值也是亚像素精度的,可能包含小数部分。
一个双精度浮点值,表示元素当前从原点垂直滚动的像素数,其中正值表示元素向下滚动(以显示更多底部的内容)。如果元素根本没有向上或向下滚动,则 `scrollTop` 为 0。如果文档不是活动文档,则返回值为 0。如果文档在亚像素精度设备上呈现,则返回的值也是亚像素精度的,可能包含小数部分。

如果元素可以从初始包含块向上滚动,则`scrollTop`可能为负。例如,如果元素的{{cssxref("flex direction")}}`column-reverse`,并且内容向上增长,那么当滚动条位于其最底部位置(在滚动内容的开始处)时,`scrollTop``0`,然后当你向内容末尾滚动时,scrallTop 逐渐变负
如果元素可以从初始包含块向上滚动,则 `scrollTop` 可能为负。例如,如果元素的 {{cssxref("flex-direction")}}`column-reverse`,并且内容向上增长,那么当滚动条位于其最底部位置(在滚动内容的开始处)时,`scrollTop``0`,然后当你向内容末尾滚动时,其值逐渐向负方向增长

Safari 通过将`scrollTop`更新到最大滚动位置之外来响应过度滚动(除非禁用默认的“反弹”效果,例如将{{cssxref("overscroll-behavior")}}设置为`none`),而 Chrome 和 Firefox 则不会。例如,在 Safari 浏览器上,当元素已经位于顶部时继续向上滚动,`scrollTop`可能会变为负值。
Safari 通过将 `scrollTop` 更新到最大滚动位置之外来响应过度滚动(除非禁用默认的“反弹”效果,例如将 {{cssxref("overscroll-behavior")}} 设置为 `none`),而 Chrome 和 Firefox 则不会。例如,在 Safari 浏览器上,当元素已经位于顶部时继续向上滚动,`scrollTop` 可能会变为负值。

通过设置 scrollTop 属性,可以让元素在垂直方向滚动到指定位置,和使用{{domxref("Element.scroll()")}}设置`behavior: "auto"`效果一致。
通过设置 `scrollTop` 属性,可以让元素在垂直方向滚动到指定位置,和使用 {{domxref("Element.scroll()")}} 设置 `behavior: "auto"` 效果一致。

## 例子
## 示例

### Scrolling an element
### 滚动元素

在这个例子中,尝试滚动带有虚线边框的内部容器,看看`scrollTop`的值是如何变化的。
在这个示例中,尝试滚动带有虚线边框的内部容器,看看 `scrollTop` 的值是如何变化的。

#### HTML

```html
<div id="container">
<div id="scroller">
<p>
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
Orbiting this at a distance of roughly ninety-two million miles is an
utterly insignificant little blue green planet whose ape-descended life
forms are so amazingly primitive that they still think digital watches are
a pretty neat idea.
在银河系西旋臂少人问津的末端、未经勘测的荒僻区域深处,有一颗无人理睬的小小黄色恒星。以约莫九千两百万英里半径绕其旋转的,是一颗彻底无关紧要的小小蓝绿色行星,这上面从猿猴繁衍而来的生命形式原始得让人吃惊,居然还以为数字式电子表是什么很高明的主意。
</p>
</div>
</div>
Expand Down Expand Up @@ -70,7 +67,7 @@ scroller.addEventListener("scroll", (event) => {

#### 结果

{{EmbedLiveSample("Scrolling_an_element", 400, 250)}}
{{EmbedLiveSample("滚动元素", 400, 250)}}

## 规范

Expand All @@ -80,8 +77,8 @@ scroller.addEventListener("scroll", (event) => {

{{Compat}}

## 参考
## 参见

- [MSDN's Measuring Element Dimension and Location](<https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx>)
- [MSDN 测量元素尺寸和位置](<https://msdn.microsoft.com/zh-cn/library/hh781509(v=vs.85).aspx>)
- {{domxref("Element.scrollLeft")}}
- {{domxref("Element.scrollTo()")}}

0 comments on commit 2d61dac

Please sign in to comment.