CSSOM ビュー API

CSSOM ビュー API を使用すると、文書の視覚的なビューを操作できます。これには、要素のレイアウトボックスの位置を取得する、スクリプトでビューポートの幅や高さを取得する、そして要素をスクロールするといったことが含まれます。

ガイド

座標系

表示コンテキスト(モニター上のウィンドウや、モバイル端末のビューポートなど)の中の位置や、印刷時の用紙上の位置などを指定するために使用する座標系です。

ビューポートの概念

ビューポートの概念、すなわちその定義、CSS・SVG・モバイル端末における影響、そして視覚的ビューポートとレイアウトビューポートの違いについて。

インターフェイス

• MediaQueryList
• MediaQueryListEvent
• Screen
• CaretPosition
• VisualViewport

他のインターフェイスへの拡張

このモジュールは、その他の仕様書で定義されているインターフェイスにプロパティ、メソッド、イベントなどを追加します。

Window への拡張

• devicePixelRatio
• innerHeight
• innerWidth
• matchMedia()
• moveBy()
• moveTo()
• outerHeight
• outerWidth
• pageXOffset (scrollX を参照)
• pageYOffset (scrollY を参照)
• resizeBy()
• resizeTo()
• screen
• screenLeft
• screenTop
• screenX
• screenY
• visualViewport
• scroll()
• scrollBy()
• scrollTo()
• scrollX
• scrollY
• resize イベント

Document への拡張

• elementFromPoint()
• caretPositionFromPoint()
• scrollingElement
• scroll イベント
• scrollend イベント

Element への拡張

• checkVisibility()
• clientHeight
• clientLeft
• clientTop
• clientWidth
• currentCSSZoom
• getBoundingClientRect()
• getClientRects()
• scroll()
• scrollBy()
• scrollHeight
• scrollIntoView()
• scrollLeft
• scrollTo()
• scrollTop
• scrollWidth
• scroll イベント
• scrollend イベント

HTMLElement への拡張

• offsetHeight
• offsetLeft
• offsetParent
• offsetTop
• offsetWidth

HTMLImageElement への拡張

• x
• y

Range への拡張

• getBoundingClientRect()
• getClientRects()

MouseEvent への拡張

• clientX
• clientY
• offsetX
• offsetY
• pageX
• pageY
• screenY
• x
• y

このモジュールは、Text, Element, CSSPseudoElement, Document の各インターフェイスに適用される幾何学的ユーティリティメソッドを定義しています。これらの GeometryUtils 機能は、現時点ではどのブラウザーにも実装されていません。

仕様書

関連情報

• CSS オブジェクトモデル (CSSOM) API
• CSSOM ビューモジュール
• CSS オーバーフローモジュール
• CSS オーバースクロール動作モジュール
• CSS スクロールスナップモジュール
• ビューポート
• レイアウトビューポート
• 視覚的ビューポート
• zoom
• CSSOM
• CSS pixel
• Scroll container
• <meta>