window

浏览器提供的window对象的常用API

• child::innerHeight与innerWidth
• window.open()：[beused::在新标签中打开网页]
• child::

  弹窗API

  • window.alert()：弹出警告框。
  • window.prompt()：弹出输入框。
  • window.confirm()：弹出确认框。

  指向原始笔记的链接

• child::

  滚动条 API

  JS

  基础API

  获取滚动位置

  • 对于整个标签页：windows.scrollX和windows.scrollY
  • 对于某个元素：使用element.scrollTop和element.scrollLeft属性来获取垂直和水平方向上滚动条的位置

  控制滚动行为

  • scrollTo() - 滚动到指定位置
  • scrollBy() - 相对当前位置滚动一定距离

  滑动条对齐原理

  滑动条比例关系

  滑动条比例 = 容器宽度 / 总内容宽度

  滑动条两端分别对齐滑动窗口的边界，滑动条的位置反映了当前可视区域在总内容中的位置。

  scrollBy的实现

  scrollBy就是移动一段距离，结合getBoundingClientRect可以实现自动滑动：

  • 计算目标元素离视口的距离
  • 滚动相应的距离
  • 这样就能将目标元素滚动进视图中

  // 示例：将元素滚动到可视区域
  function scrollIntoView(element) {
    const rect = element.getBoundingClientRect();
    const scrollDistance = rect.top;
    window.scrollBy(0, scrollDistance);
  }

  指向原始笔记的链接