HTML DOM 窗口 scrollX 属性(1)

📌 相关文章

📜 HTML DOM 窗口 scrollX 属性(1)

📅 最后修改于: 2023-12-03 14:41:46.172000 🧑 作者: Mango

HTML DOM 窗口 scrollX 属性

简介

scrollX 是 HTML DOM 窗口对象的属性之一，用于获取或设置当前页面的横向滚动条距离左边缘的像素值。该属性只读，可以被任何浏览器支持。

语法

获取横向滚动条距离左侧的像素值：

window.scrollX;

设置横向滚动条距离左侧的像素值：

window.scroll(X, Y);

其中 X 和 Y 分别是滚动条距离左边缘和顶部的像素值。

示例

<!DOCTYPE html>
<html>
<head>
  <title>scrollX 属性</title>
</head>
<body>
  <div style="width: 1000px; height: 2000px;"></div>
  <script>
    console.log(window.scrollX); // 输出横向滚动条距离左边缘的像素值
    window.scrollTo(100, 0); // 将横向滚动条距离左边缘的像素值设置为 100
    console.log(window.scrollX); // 输出横向滚动条距离左边缘的像素值
  </script>
</body>
</html>

注意事项

scrollX 属性是只读属性，不能被修改。
不同浏览器对 scrollX 属性的支持不同，有的浏览器可能不支持该属性。
为了确保跨浏览器兼容性，在使用 scrollX 属性之前应进行检测。可以通过 if (window.scrollX !== undefined) 来检测 scrollX 是否被支持。