JavaScript onScroll 在 Google Apps 脚本网络应用程序中不起作用答案

【问题标题】：JavaScript onScroll not working in Google Apps Script web appJavaScript onScroll 在 Google Apps 脚本网络应用程序中不起作用
【发布时间】：2012-08-28 09:41:30
【问题描述】：

我在 HTML 中创建了一个表格，并使用 CSS 添加了样式，并通过 javascript 添加了一个滚动元素。我在这篇文章中附上了示例源代码。当我将代码放在谷歌网站时，滚动不起作用。请帮我解决这个问题。我从以下站点链接中获得了示例代码。

http://blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8-firefox-35-chrome/

下面是名为“table.html”的 HTML 文件中的编码

<html>
  <head>
    <style>
      table#table-body, table#table-header, table#table-footer
      {
        border-spacing:0;
        border-collapse:collapse;
        border:1px solid;
        table-layout:fixed;
        width:1000px;
        border:1px solid #000;
      }

      table#table-header th
      {
        background:#c2a1a1;
      }

      table#table-footer td
      {
        background:#a39393;
      }

      table#table-body td
      {
        background:#e1d9d9;
      }

      table#table-body td, table#table-header th, table#table-footer td
      {
        border:1px solid #000;
        width:100px;
        height:30px;
        overflow:hidden;
        white-space:nowrap; 
      }

      div#header-container, div#footer-container
      {
        overflow:hidden;
      }

      div#scroll
      {
        width:500px;
        overflow:hidden;
        max-height:150px;
        padding-left:1px;
      }

      div#fake-scroll-container
      {
        width:500px;
        overflow:hidden;
        position:relative;
      }

      div#y-fake-scroll
      {
        overflow-y:scroll; 
        overflow-x:hidden;
        background:transparent; 
        position:absolute;
        right:0;
        position:absolute;
        max-height:149px;
        top:31px;
      }

      div#x-fake-scroll
      {
        height:40px;
        margin-top:-23px;
        overflow-x:auto;
        overflow-y:hidden;
        margin-top:expression('0px');/* IE 7 fix*/
        height:expression('17px'); /* IE 7 fix*/
      }

      div#y-scroll
      {
        max-height:150px;
        overflow-y:auto;
        overflow-x:hidden;
        overflow:scroll;
        width:1010px;
        padding:0px 1px 1px 1px;
      }

      div#header-container
      {
        padding:1px 1px 0 1px;
      }

      div#footer-container
      {
        padding:0 1px;
      }      
    </style>
  </head>
  <body>
    <div id="fake-scroll-container">

      <div id="header-container">
        <table id="table-header" cellpadding="0" cellspacing="0">
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
            <th>Column 6</th>
            <th>Column 7</th>
            <th>Column 8</th>
            <th>Column 9</th>
            <th>Column 10</th>
          </tr>
        </table>
      </div>

      <div id="scroll">
        <table id="table-body" cellpadding="0" cellspacing="0">
          <tr>
            <td>Cell 1.1</td>
            <td>Cell 1.2</td>
            <td>Cell 1.3</td>
            <td>Cell 1.4</td>
            <td>Cell 1.5</td>
            <td>Cell 1.6</td>
            <td>Cell 1.7</td>
            <td>Cell 1.8</td>
            <td>Cell 1.9</td>
            <td>Cell 1.10</td>      
          </tr>
          <tr>
            <td>Cell 2.1</td>
            <td>Cell 2.2</td>
            <td>Cell 2.3</td>
            <td>Cell 2.4</td>
            <td>Cell 2.5</td>
            <td>Cell 2.6</td>
            <td>Cell 2.7</td>
            <td>Cell 2.8</td>
            <td>Cell 2.9</td>
            <td>Cell 2.10</td>      
          </tr> 
          <tr>
            <td>Cell 3.1</td>
            <td>Cell 3.2</td>
            <td>Cell 3.3</td>
            <td>Cell 3.4</td>
            <td>Cell 3.5</td>
            <td>Cell 3.6</td>
            <td>Cell 3.7</td>
            <td>Cell 3.8</td>
            <td>Cell 3.9</td>
            <td>Cell 3.10</td>      
          </tr> 
          <tr>
            <td>Cell 4.1</td>
            <td>Cell 4.2</td>
            <td>Cell 4.3</td>
            <td>Cell 4.4</td>
            <td>Cell 4.5</td>
            <td>Cell 4.6</td>
            <td>Cell 4.7</td>
            <td>Cell 4.8</td>
            <td>Cell 4.9</td>
            <td>Cell 4.10</td>      
          </tr>
          <tr>
            <td>Cell 5.1</td>
            <td>Cell 5.2</td>
            <td>Cell 5.3</td>
            <td>Cell 5.4</td>
            <td>Cell 5.5</td>
            <td>Cell 5.6</td>
            <td>Cell 5.7</td>
            <td>Cell 5.8</td>
            <td>Cell 5.9</td>
            <td>Cell 5.10</td>      
          </tr>
          <tr>
            <td>Cell 6.1</td>
            <td>Cell 6.2</td>
            <td>Cell 6.3</td>
            <td>Cell 6.4</td>
            <td>Cell 6.5</td>
            <td>Cell 6.6</td>
            <td>Cell 6.7</td>
            <td>Cell 6.8</td>
            <td>Cell 6.9</td>
            <td>Cell 6.10</td>      
          </tr>
          <tr>
            <td>Cell 7.1</td>
            <td>Cell 7.2</td>
            <td>Cell 7.3</td>
            <td>Cell 7.4</td>
            <td>Cell 7.5</td>
            <td>Cell 7.6</td>
            <td>Cell 7.7</td>
            <td>Cell 7.8</td>
            <td>Cell 7.9</td>
            <td>Cell 7.10</td>      
          </tr>
          <tr>
            <td>Cell 8.1</td>
            <td>Cell 8.2</td>
            <td>Cell 8.3</td>
            <td>Cell 8.4</td>
            <td>Cell 8.5</td>
            <td>Cell 8.6</td>
            <td>Cell 8.7</td>
            <td>Cell 8.8</td>
            <td>Cell 8.9</td>
            <td>Cell 8.10</td>      
          </tr>
        </table>    
      </div>
      <div id="y-fake-scroll">
        <div id="y-table-emulator" style="width:40px;">
          &nbsp;
        </div>
      </div>

      <div id="x-fake-scroll">
        <div id="x-table-emulator">
          &nbsp;
        </div>
      </div>
      <script>
        var YtableEmulator = document.getElementById('y-table-emulator');
        var XtableEmulator = document.getElementById('x-table-emulator');
        var table = document.getElementById('table-body');

        YtableEmulator.style.height = table.clientHeight == 0 ? "330px" : table.clientHeight + "px";
        XtableEmulator.style.width = table.clientWidth + "px";

        var scrollablePanel = document.getElementById('scroll');
        var headerContainer = document.getElementById('header-container');
        var footerContainer = document.getElementById('footer-container');
        var YfakeScrollablePanel = document.getElementById('y-fake-scroll');
        var XfakeScrollablePanel = document.getElementById('x-fake-scroll');


        YfakeScrollablePanel.style.top = headerContainer.clientHeight == 0 ? "34px" : headerContainer.clientHeight + "px";
        scrollablePanel.onscroll = function (e) {
          XfakeScrollablePanel.scrollTop = scrollablePanel.scrollTop;
        }
          YfakeScrollablePanel.onscroll = function (e) {
            scrollablePanel.scrollTop = YfakeScrollablePanel.scrollTop;
          }
            XfakeScrollablePanel.onscroll = function (e) {
              scrollablePanel.scrollLeft = XfakeScrollablePanel.scrollLeft;
              headerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
              footerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
            }
              alert('but this is fine!');
      </script>
    </div>
  </body>
</html>

这里是名为“Code.gs”的 GAS 文件中的编码

function doGet() {
  return HtmlService.createTemplateFromFile('table').evaluate();
}

我认为脚本标签内的 .onscroll 在发布项目时不起作用。

请帮我解决这个问题。

感谢和问候， chockalingam。

【问题讨论】：

标签： javascript scroll google-apps-script google-sites google-caja

【解决方案1】：

我在 Google Caja 问题跟踪器中提出了这个问题，他们修复了它。您可以查看here.

实际上我想使用谷歌网站中固定的表格标题滚动。

Google Caja 团队将修改提交给 Apps Script 团队，您可以查看here.

尚未针对 Apps 脚本部署此问题。请点击上述问题链接以获取有关此问题的进一步更新。

请尽快支持在 Apps Script 中部署。

【讨论】：

此概念已成功部署 tnx，供所有支持解决此问题的人使用。 Tnx 给所有人。

【解决方案2】：

我在这里更新了问题跟踪器：http://code.google.com/p/google-apps-script-issues/issues/detail?id=1781，但为了完整起见，我也想在 SO 上发帖。

这似乎是 Caja 的问题。我将您的 HTML 代码粘贴到 Caja Playground (http://caja.appspot.com) 并看到相同的行为 - 移动滚动条没有效果。请在 Google Caja 问题跟踪器上提出此问题：http://code.google.com/p/google-caja/issues/list

【讨论】：

特别感谢 Jan Kleinert 先生指导我在 Google Caja 问题跟踪器论坛上发布问题。非常感谢@Jan Kleinert