Attachment 348903 Details for Bug 188043 – Testcase (scrollIntoView)

Testcase (scrollIntoView)

smooth-scrolling-scrollIntoView.html (text/html), 2.68 KB, created by Frédéric Wang (:fredw) on 2018-09-05 03:02:09 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Frédéric Wang (:fredw)

Created: 2018-09-05 03:02:09 PDT

Size: 2.68 KB

patch

obsolete

><!DOCTYPE html>
><head>
>  <meta charset="utf-8">
>  <title>Smooth Scrolling</title>
>  <meta name="viewport" content="width=device-width">
>  <style>
>    .scrollable {
>      background: gray;
>      overflow-y: auto;
>      -webkit-overflow-scrolling: touch;
>    }
>    .scrollable {
>      width: 400px;
>      height: 100px;
>    }
>  </style>
>  <script type="text/javascript">
>    function scrollBoxes(p) {
>      document.querySelectorAll('.scrollable').forEach(function(element) {
>        element.lastElementChild.scrollIntoView(p);
>      });
>      document.querySelectorAll('iframe').forEach(function(element) {
>        element.contentDocument.body.firstElementChild.lastElementChild.scrollIntoView(p);
>      });
>    }
>  </script>
></head>
><body>
>  <div>
>    <input type="button" onclick="scrollBoxes({inline: 'center', behavior: 'instant'});" value="scroll instant"/>
>    <input type="button" onclick="scrollBoxes({inline: 'center', behavior: 'smooth'});" value="scroll smooth"/>
>    <input type="button" onclick="scrollBoxes({inline: 'center', behavior: 'auto'});" value="scroll auto"/>
>    <div>scroll-behavior: auto;
>      <div class="scrollable">
>        <div style="width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);">
>          <span style="display: inline-block; width: 1000px"></span><span style="display: inline-block; width: 10px; height: 10px; background: black;"></span>
>        </div>
>    </div>
>    </div>
>    <div>scroll-behavior: smooth;<br/>
>      <div class="scrollable" style="scroll-behavior: smooth">
>        <div style="width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);">
>          <span style="display: inline-block; width: 1000px"></span><span style="display: inline-block; width: 10px; height: 10px; background: black;"></span>
>        </div>
>      </div>
>    </div>
>    <div>scroll-behavior: auto;<br/>
>      <iframe width="400px" height="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: auto'><body><div style='width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);'><span style='display: inline-block; width: 1000px'></span><span style='display: inline-block; width: 10px; height: 10px; background: black;'></span></div></body></html>"></iframe>
>    </div>
>    <div>scroll-behavior: smooth;<br/>
>      <iframe width="400px" height="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: smooth'><body><div style='width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);'><span style='display: inline-block; width: 1000px'></span><span style='display: inline-block; width: 10px; height: 10px; background: black;'></span></div></body></html>"></iframe>
>    </div>
>  </div>
></body>

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Smooth Scrolling</title>
  <meta name="viewport" content="width=device-width">
  <style>
    .scrollable {
      background: gray;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .scrollable {
      width: 400px;
      height: 100px;
    }
  </style>
  <script type="text/javascript">
    function scrollBoxes(p) {
      document.querySelectorAll('.scrollable').forEach(function(element) {
        element.lastElementChild.scrollIntoView(p);
      });
      document.querySelectorAll('iframe').forEach(function(element) {
        element.contentDocument.body.firstElementChild.lastElementChild.scrollIntoView(p);
      });
    }
  </script>
</head>
<body>
  <div>
    <input type="button" onclick="scrollBoxes({inline: 'center', behavior: 'instant'});" value="scroll instant"/>
    <input type="button" onclick="scrollBoxes({inline: 'center', behavior: 'smooth'});" value="scroll smooth"/>
    <input type="button" onclick="scrollBoxes({inline: 'center', behavior: 'auto'});" value="scroll auto"/>
    <div>scroll-behavior: auto;
      <div class="scrollable">
        <div style="width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);">
          <span style="display: inline-block; width: 1000px"></span><span style="display: inline-block; width: 10px; height: 10px; background: black;"></span>
        </div>
    </div>
    </div>
    <div>scroll-behavior: smooth;<br/>
      <div class="scrollable" style="scroll-behavior: smooth">
        <div style="width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);">
          <span style="display: inline-block; width: 1000px"></span><span style="display: inline-block; width: 10px; height: 10px; background: black;"></span>
        </div>
      </div>
    </div>
    <div>scroll-behavior: auto;<br/>
      <iframe width="400px" height="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: auto'><body><div style='width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);'><span style='display: inline-block; width: 1000px'></span><span style='display: inline-block; width: 10px; height: 10px; background: black;'></span></div></body></html>"></iframe>
    </div>
    <div>scroll-behavior: smooth;<br/>
      <iframe width="400px" height="100px" scrolling="yes" srcdoc="<!doctype><html style='scroll-behavior: smooth'><body><div style='width: 2000px; height: 400px; background: linear-gradient(135deg, red, green);'><span style='display: inline-block; width: 1000px'></span><span style='display: inline-block; width: 10px; height: 10px; background: black;'></span></div></body></html>"></iframe>
    </div>
  </div>
</body>

Actions: View

Attachments on bug 188043: 346381 | 346513 | 346627 | 348010 | 348493 | 348494 | 348500 | 348903 | 348904 | 349043 | 349393 | 349536 | 349668 | 349879 | 350255 | 350271 | 350286 | 350288 | 350309 | 350409 | 350566 | 350567 | 350568 | 350571 | 350572 | 350579 | 350610 | 350615 | 350617 | 350620 | 350621 | 353958 | 353960 | 354071 | 354079 | 354082 | 354086 | 354319 | 354320 | 356043 | 356151 | 358313 | 363090 | 363093 | 368453 | 368454 | 368455 | 368459 | 368460 | 372999 | 377582 | 377813 | 378193 | 382485 | 382550 | 382561 | 384462 | 384514 | 384517 | 384623 | 384720 | 384789 | 384800 | 440977