JavaScript onScroll无法在Google Apps脚本网络应用中使用

Question

我用HTML创建了一个表格，并使用CSS添加了样式，并通过javascript添加了滚动元素。 我在这篇文章中附上了示例源代码。 当我将代码放在Google网站中时，滚动无法正常工作。 请帮助我解决此问题。 我从下面的站点链接中获得了示例代码。

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();
}

我认为发布项目时script标记中的.onscroll不起作用。

请帮我解决这个问题。

谢谢与问候，chockalingam。

Answer 1

我在Google Caja问题跟踪器中提出了此问题，他们已将其修复。 您可以在这里查看。

实际上，我想使用Google网站中固定的表格标题滚动功能。

Google Caja团队对Apps Script团队提出了修改，您可以在此处进行查看。

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

请支持尽快将其部署在Apps脚本中。

Answer 2

我在此处的问题跟踪器中进行了更新： http : //code.google.com/p/google-apps-script-issues/issues/detail?id=1781 ，但出于完整性考虑，我也想在此发布。

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