✨ amp-sidebar: support autoscroll

[aghassemi]

Closes #19570

amp-sidebar can automatically scroll the overflowing container to first element that is decorated with autoscroll an attribute in both sidebar and toolbar cases.

This feature is useful when dealing with long navigation list and wanting the sidebar to scroll to the current navigation items when page loads.

When using toolbar feature, autoscroll only works if the <nav toolbar> element is set to overflow: auto or overflow: scroll.

Demo

https://aghassemi-amphtml.firebaseapp.com/examples/amp-sidebar-autoscroll.amp.html

Snippet

Responsive (desktop and mobile)

<style amp-custom="">

  nav [toolbar] {
    overflow: auto;
  }

</style>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li autoscroll class="currentPage">Nav item 4</li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
    </ul>
  </nav>
</amp-sidebar>

<div id="target-element">
</div>

Mobile only

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li autoscroll class="currentPage">Nav item 4</li>
      <li>Nav item 5</li>
      <li>Nav item 6</li>
    </ul>
</amp-sidebar>

Full Example:

https://github.com/ampproject/amphtml/blob/2ed7c73b405fff323400aee331c32602945bebb6/examples/amp-sidebar-autoscroll.amp.html

/To @alanorozco @CrystalFaith
/FYI @pbakaus @nainar

[aghassemi]

@CrystalOnScript merging to make the Canary cut, will implement any changes you like to see in the next PR.

@honeybadgerdontcare I am gonna go with assumption this is very likely safe and merge to make the Canary cut, let me know if you find anything later and I'll deal with it.

Thanks!

[honeybadgerdontcare]

@aghassemi okay, I'll skip testing it then

[Gregable]

This change breaks a small number of documents which have an <amp-selector> descendant of <amp-sidebar>. The problem arises because two reference points end up applying to one tag, since <amp-selector> also defines reference points.

I suggest we revert this change for now, and then reconsider how to move it forward again.

[Gregable]

@aghassemi

[aghassemi]

@newmuis Jon, we are working on validation rules for this. Do you want to allow this (essentially the second gif in the description) in AMP Story or should we prevent it?

[newmuis]

It can be allowed, since (AFAICT) it does not have any effect on the document outside of the sidebar.

/cc @bramanudom who owns the <amp-sidebar> integration in stories.