Attachment 358488 Details for Bug 193192 – Self-contained example

Self-contained example

nativescrollbars.html (text/html), 2.60 KB, created by Andy E on 2019-01-07 01:44:24 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Andy E

Created: 2019-01-07 01:44:24 PST

Size: 2.60 KB

patch

obsolete

><!DOCTYPE html>
><html>
>  <head>
>    <meta charset="utf-8">
>    <style type="text/css">
>      #wrapper {
>        position: absolute;
>        width: 500px;
>        height: 300px;
>        overflow: auto;
>        background: white;
>        top: calc(50% - 150px);
>        left: calc(50% - 250px);
>        display: flex;
>      }
>
>      #canvas {
>        position: -webkit-sticky;
>        position: sticky;
>        top: 0;
>        left: 0;
>        bottom: 0;
>        right: 0;
>        width: 100%;
>        height: 100%;
>        background-color: lightblue;
>      }
>
>    </style>
>  </head>
>  <body>
>    <div id="wrapper">
>      <canvas id="canvas" width="500" height="300"></canvas>
>      <div id="inner"><div id="innerinner"></div></div>
>    </div>
>
>    <script>
>      const ctx = canvas.getContext('2d');
>      const rowHeight = 32;
>      const colWidth = 100;
>      const numRows = 100;
>      const numCols = 100;
>      const rowsPerView = canvas.height / rowHeight;
>      const colsPerView = canvas.width / colWidth;
>      let rendering = false;
>
>      ctx.fillStyle = 'blue';
>      ctx.strokeStyle = 'gray';
>      ctx.font = '12px Verdana';
>      ctx.translate(0.5, 0.5);
>
>      inner.style.height = `${rowHeight * numRows + 1}px`;
>      innerinner.style.width = `${colWidth * numCols + 1}px`;
>
>      if (wrapper.scrollWidth > innerinner.offsetWidth) {
>        innerinner.style.width = `${(colWidth * numCols + 1) - wrapper.offsetWidth}px`;
>      }
>
>      function drawCells() {
>        rendering = false;
>        ctx.clearRect(0, 0, canvas.width, canvas.height);
>
>        const { scrollTop, scrollLeft } = wrapper;
>
>        for (let i = 0; i <= rowsPerView; i++) {
>          const row = Math.floor(scrollTop / rowHeight) + i;
>          const rowOffset = (rowHeight - (scrollTop % rowHeight)) + ((i -1) * rowHeight);
>
>          if (row < 0 || row + 1 > numRows) {
>            continue;
>          }
>
>          for (let j = 0; j <= colsPerView; j++) {
>            const col = Math.floor(scrollLeft / colWidth) + j;
>            const colOffset = (colWidth - (scrollLeft % colWidth)) + ((j - 1) * colWidth);
>
>            if (col < 0 || col + 1 > numCols) {
>              continue;
>            }
>
>            ctx.strokeRect(colOffset, rowOffset, colWidth, rowHeight);
>            ctx.fillText(`Cell ${row},${col}`, colOffset + 10, rowOffset + 22);
>          }
>        }
>      }
>      drawCells();
>
>      wrapper.addEventListener('scroll', () => {
>        if (!rendering && wrapper.scrollTop >= 0 && wrapper.scrollTop <= inner.offsetHeight) {
>          rendering = true;
>          requestAnimationFrame(drawCells);
>        }
>      });
>    </script>
>  </body>
></html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #wrapper {
        position: absolute;
        width: 500px;
        height: 300px;
        overflow: auto;
        background: white;
        top: calc(50% - 150px);
        left: calc(50% - 250px);
        display: flex;
      }

      #canvas {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: lightblue;
      }

    </style>
  </head>
  <body>
    <div id="wrapper">
      <canvas id="canvas" width="500" height="300"></canvas>
      <div id="inner"><div id="innerinner"></div></div>
    </div>

    <script>
      const ctx = canvas.getContext('2d');
      const rowHeight = 32;
      const colWidth = 100;
      const numRows = 100;
      const numCols = 100;
      const rowsPerView = canvas.height / rowHeight;
      const colsPerView = canvas.width / colWidth;
      let rendering = false;

      ctx.fillStyle = 'blue';
      ctx.strokeStyle = 'gray';
      ctx.font = '12px Verdana';
      ctx.translate(0.5, 0.5);

      inner.style.height = `${rowHeight * numRows + 1}px`;
      innerinner.style.width = `${colWidth * numCols + 1}px`;

      if (wrapper.scrollWidth > innerinner.offsetWidth) {
        innerinner.style.width = `${(colWidth * numCols + 1) - wrapper.offsetWidth}px`;
      }

      function drawCells() {
        rendering = false;
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        const { scrollTop, scrollLeft } = wrapper;

        for (let i = 0; i <= rowsPerView; i++) {
          const row = Math.floor(scrollTop / rowHeight) + i;
          const rowOffset = (rowHeight - (scrollTop % rowHeight)) + ((i -1) * rowHeight);

          if (row < 0 || row + 1 > numRows) {
            continue;
          }

          for (let j = 0; j <= colsPerView; j++) {
            const col = Math.floor(scrollLeft / colWidth) + j;
            const colOffset = (colWidth - (scrollLeft % colWidth)) + ((j - 1) * colWidth);

            if (col < 0 || col + 1 > numCols) {
              continue;
            }

            ctx.strokeRect(colOffset, rowOffset, colWidth, rowHeight);
            ctx.fillText(`Cell ${row},${col}`, colOffset + 10, rowOffset + 22);
          }
        }
      }
      drawCells();

      wrapper.addEventListener('scroll', () => {
        if (!rendering && wrapper.scrollTop >= 0 && wrapper.scrollTop <= inner.offsetHeight) {
          rendering = true;
          requestAnimationFrame(drawCells);
        }
      });
    </script>
  </body>
</html>

Actions: View

Attachments on bug 193192: 358488