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

JavaScript onScroll無法在Google Apps腳本網絡應用中使用

問題描述

2 個解決方案

解決方案1
1 2012-08-30 10:44:14

解決方案2
0 已采納 2012-08-29 18:38:10

JavaScript onScroll無法在Google Apps腳本網絡應用中使用

問題描述

2 個解決方案

解決方案1 1 2012-08-30 10:44:14

解決方案2 0 已采納 2012-08-29 18:38:10

解決方案1
1 2012-08-30 10:44:14

解決方案2
0 已采納 2012-08-29 18:38:10