Skip to content

Commit c64f86e

Browse files
annevkannevk
committed
attempt to define scrollintoview; sectioning sucks
1 parent e5fafa2 commit c64f86e

2 files changed

Lines changed: 237 additions & 102 deletions

File tree

‎cssom-view/Overview.html‎

Lines changed: 131 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -163,10 +163,8 @@ <h2 class="no-num no-toc" id=toc>Table of Contents</h2>
163163
class=secno>5.1. </span>The <code title="">getClientRects()</code> and
164164
<code title="">getBoundingClientRect()</code> methods</a>
165165

166-
<li><a href="#scroll-attributes"><span class=secno>5.2. </span>The <code
167-
title="">scrollTop</code>, <code title="">scrollLeft</code>, <code
168-
title="">scrollWidth</code>, and <code title="">scrollHeight</code>
169-
attributes</a>
166+
<li><a href="#element-scrolling-members"><span class=secno>5.2.
167+
</span><code title="">Element</code> Scrolling Members</a>
170168

171169
<li><a href="#client-attributes"><span class=secno>5.3. </span>The <code
172170
title="">clientTop</code>, <code title="">clientLeft</code>, <code
@@ -725,6 +723,8 @@ <h2 id=extensions-to-the-element-interface><span class=secno>5.
725723
<a href="#clientrectlist">ClientRectList</a> <a href="#dom-element-getclientrects">getClientRects</a>();
726724
<a href="#clientrect">ClientRect</a> <a href="#dom-element-getboundingclientrect">getBoundingClientRect</a>();
727725

726+
// scrolling
727+
void <a href="#dom-element-scrollintoview" title=dom-Element-scrollIntoView>scrollIntoView</a>(optional boolean <var title="">top</var>);
728728
attribute long <a href="#dom-element-scrolltop">scrollTop</a>; // scroll on setting
729729
attribute long <a href="#dom-element-scrollleft">scrollLeft</a>; // scroll on setting
730730
readonly attribute long <a href="#dom-element-scrollwidth">scrollWidth</a>;
@@ -833,10 +833,126 @@ <h3 id=the-getclientrects-and-getboundingclient><span class=secno>5.1.
833833
var exampleHeight = example.height;</code></pre>
834834
</div>
835835

836-
<h3 id=scroll-attributes><span class=secno>5.2. </span>The <code
837-
title="">scrollTop</code>, <code title="">scrollLeft</code>, <code
838-
title="">scrollWidth</code>, and <code title="">scrollHeight</code>
839-
attributes</h3>
836+
<h3 id=element-scrolling-members><span class=secno>5.2. </span><code
837+
title="">Element</code> Scrolling Members</h3>
838+
839+
<p>To <dfn id=scroll-an-element-into-view>scroll an element into
840+
view</dfn>, optionally with an <i title="">align to top flag</i> set,
841+
means to run these steps for each ancestor element or <a
842+
href="#viewport">viewport</a> that establishes a scrolling box, in order
843+
of innermost to outermost scrolling box:
844+
845+
<ol>
846+
<li>
847+
<p>If the <a href="#document"><code>Document</code></a> associated with
848+
the element to be scrolled into view is not <span>same origin</span>
849+
with the <a href="#document"><code>Document</code></a> associated with
850+
the element or <a href="#viewport">viewport</a> associated with the
851+
scrolling box, terminate these steps.
852+
853+
<li>
854+
<p>If the <i title="">align to top flag</i> is set align the top of the
855+
border box of the element to be scrolled into view with the top of the
856+
scrolling box.
857+
858+
<li>
859+
<p>Otherwise, if the <i title="">align to top flag</i> is not set align
860+
the bottom of the border box of the element to be scrolled into view
861+
with the bottom of the scrolling box.
862+
863+
<li>
864+
<p class=XXX>left/right?
865+
866+
<li>
867+
<p>If the aligning did not cause content to move terminate these steps.
868+
869+
<li>
870+
<dl>
871+
<dt>If the scrolling box is associated with an element
872+
873+
<dd>
874+
<p><a href="#queue-a-task">Queue a task</a> to <a
875+
href="#fire-a-simple-event">fire a simple event</a> named <code
876+
title=event-scroll>scroll</code> at the element associated with the
877+
scrolling box, unless a <a href="#task">task</a> to fire that event at
878+
that element was already <a href="#queue-a-task" title="queue a
879+
task">queued</a>.
880+
881+
<dt>If the scrolling box is associated with a <a
882+
href="#viewport">viewport</a>
883+
884+
<dd>
885+
<p><a href="#queue-a-task">Queue a task</a> to <a
886+
href="#fire-a-simple-event">fire a simple event</a> named <code
887+
title=event-scroll>scroll</code> that bubbles at the <a
888+
href="#document"><code>Document</code></a> object associated with the
889+
<a href="#viewport">viewport</a>, unless a <a href="#task">task</a> to
890+
fire that event at that <a href="#document"><code>Document</code></a>
891+
object was already <a href="#queue-a-task" title="queue a
892+
task">queued</a>.
893+
</dl>
894+
</ol>
895+
896+
<p>To <dfn id=scroll-an-element>scroll an element</dfn> to <var
897+
title="">x</var>,<var title="">y</var> means to:
898+
899+
<ol>
900+
<li>
901+
<p>If either <var title="">x</var> or <var title="">y</var> is infinite
902+
or NaN terminate this algorithm.</p>
903+
904+
<li>
905+
<dl>
906+
<dt>If the element can have overflow to the right
907+
908+
<dd>
909+
<p>Let <var title="">x</var> be max(0, min(<var title="">x</var>, <a
910+
href="#content">content</a> width - <a href="#content-edge">content
911+
edge</a> width)).
912+
913+
<dt>If the element can have overflow to the left (under right-to-left
914+
conditions)
915+
916+
<dd>
917+
<p>Let <var title="">x</var> be min(0, max(<var title="">x</var>, <a
918+
href="#content-edge">content edge</a> width - <a
919+
href="#content">content</a> width)).
920+
</dl>
921+
922+
<li>
923+
<p>Let <var title="">y</var> be max(0, min(<var title="">y</var>, <a
924+
href="#content">content</a> height - <a href="#content-edge">content
925+
edge</a> height)).
926+
927+
<li>
928+
<p>Align <a href="#content">content</a> x-coordinate <var
929+
title="">x</var> with the left of the <a href="#content-edge">content
930+
edge</a> of the element and align <a href="#content">content</a>
931+
y-coordinate <var title="">y</var> with the top of the <a
932+
href="#content-edge">content edge</a> of the element.
933+
934+
<li>
935+
<p>If the aligning caused content to move <a href="#queue-a-task">queue a
936+
task</a> to <a href="#fire-a-simple-event">fire a simple event</a> named
937+
<code title=event-scroll>scroll</code> at the element, unless a <a
938+
href="#task">task</a> to fire that event at that element was already <a
939+
href="#queue-a-task" title="queue a task">queued</a>.
940+
</ol>
941+
942+
<p>The <dfn id=dom-element-scrollintoview
943+
title=dom-Element-scrollIntoView>scrollIntoView([<var title="">top</var>])
944+
method <em class=ct>must</em> run these steps:</dfn>
945+
946+
<ol>
947+
<li>
948+
<p>If the element does not have any associated CSS layout box terminate
949+
these steps.
950+
951+
<li>
952+
<p><a href="#scroll-an-element-into-view" title="scroll an element into
953+
view">Scroll the element into view</a> with the <i title="">align to top
954+
flag</i> set if <var title="">top</var> is true.
955+
</ol>
840956

841957
<p>The <dfn id=dom-element-scrolltop><code>scrollTop</code></dfn> attribute
842958
<em class=ct>must</em> return the result of running these steps:
@@ -901,24 +1017,10 @@ <h3 id=scroll-attributes><span class=secno>5.2. </span>The <code
9011017
title="">y</var> as second.
9021018

9031019
<li>
904-
<p>If <var title="">y</var> is infinite or NaN stop this algorithm.</p>
905-
906-
<li>
907-
<p>Let <var title="">y</var> be max(0, min(<var title="">y</var>, <a
908-
href="#content">content</a> height - <a href="#content-edge">content
909-
edge</a> height)).
910-
911-
<li>
912-
<p>Align <a href="#content">content</a> y-coordinate <var
913-
title="">y</var> with the top of the <a href="#content-edge">content
914-
edge</a> of the element.
915-
916-
<li>
917-
<p>If the aligning caused content to move <a href="#queue-a-task">queue a
918-
task</a> to <a href="#fire-a-simple-event">fire a simple event</a> named
919-
<code title=event-scroll>scroll</code> at the element, unless a <a
920-
href="#task">task</a> to fire that event at the element was already <a
921-
href="#queue-a-task" title="queue a task">queued</a>.
1020+
<p><a href="#scroll-an-element" title="scroll an element">Scroll the
1021+
element</a> to <a
1022+
href="#dom-element-scrollleft"><code>scrollLeft</code></a>,<var
1023+
title="">y</var>.
9221024
</ol>
9231025

9241026
<p>The <dfn id=dom-element-scrollleft><code>scrollLeft</code></dfn>
@@ -983,37 +1085,9 @@ <h3 id=scroll-attributes><span class=secno>5.2. </span>The <code
9831085
title=dom-Window-scrollY>scrollY</code></a> as second.
9841086

9851087
<li>
986-
<p>If <var title="">x</var> is infinite or NaN stop this algorithm.</p>
987-
988-
<li>
989-
<dl>
990-
<dt>If the element can have overflow to the right
991-
992-
<dd>
993-
<p>Let <var title="">x</var> be max(0, min(<var title="">x</var>, <a
994-
href="#content">content</a> width - <a href="#content-edge">content
995-
edge</a> width)).
996-
997-
<dt>If the element can have overflow to the left (under right-to-left
998-
conditions)
999-
1000-
<dd>
1001-
<p>Let <var title="">x</var> be min(0, max(<var title="">x</var>, <a
1002-
href="#content-edge">content edge</a> width - <a
1003-
href="#content">content</a> width)).
1004-
</dl>
1005-
1006-
<li>
1007-
<p>Align <a href="#content">content</a> x-coordinate <var
1008-
title="">x</var> with the left of the <a href="#content-edge">content
1009-
edge</a> of <var>A</var>.
1010-
1011-
<li>
1012-
<p>If the aligning caused content to move <a href="#queue-a-task">queue a
1013-
task</a> to <a href="#fire-a-simple-event">fire a simple event</a> named
1014-
<code title=event-scroll>scroll</code> at the element, unless a <a
1015-
href="#task">task</a> to fire that event at the element was already <a
1016-
href="#queue-a-task" title="queue a task">queued</a>.
1088+
<p><a href="#scroll-an-element" title="scroll an element">Scroll the
1089+
element</a> to <var title="">x</var>,<a
1090+
href="#dom-element-scrolltop"><code>scrollTop</code></a>.
10171091
</ol>
10181092

10191093
<p>The <dfn id=dom-element-scrollwidth><code>scrollWidth</code></dfn>

0 commit comments

Comments
 (0)