JavaScript onScroll在谷歌应用程序脚本web应用程序中不起作用
JavaScript onScroll not working in Google Apps Script web app
我用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;">
</div>
</div>
<div id="x-fake-scroll">
<div id="x-table-emulator">
</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。
我在Google Caja问题跟踪器中提出了这个问题，他们解决了它。你可以在这里查看
事实上，我想使用谷歌网站中固定的带有表格标题的滚动。
Google Caja团队向Apps Script团队提出了修改，您可以在此处查看
此问题尚未针对应用程序脚本进行部署。有关此问题的进一步更新，请访问上述问题链接。
请支持尽快在应用程序脚本中部署此功能。
我在这里更新了问题跟踪器：http://code.google.com/p/google-apps-script-issues/issues/detail?id=1781，但为了完整起见，我也想在SO上发帖。
这似乎是Caja的问题。我把你的HTML代码粘贴到Caja游乐场(http://caja.appspot.com)并看到相同的行为-移动滚动条没有任何效果。请在Google Caja问题跟踪器上提出此问题：http://code.google.com/p/google-caja/issues/list
相关文章：
- 在Web应用程序中使用Highcharts javascript
- 将下载链接从web浏览器传递给第三方应用程序
- 在web应用程序中的新搜索中重新加载搜索结果(不带jQuery）
- Web应用程序，将成员状态更新为其他成员
- 同一文本框中的验证程序CPF e CNPJ(ASP.NET web应用程序）
- web浏览器中的离线应用程序存储数据并在之后上传
- 使用Ember的Web应用程序架构.动画逻辑应该放在哪里
- 如何使用默认的网络摄像头拍摄照片并将其保存在我的c#.net web应用程序中
- c#web应用程序中的条形码打印
- 使用javascript为web应用程序自定义键盘快捷键
- 使用angularjs和node.js时的Web应用程序文件夹结构
- PhpWindows 8.1版本上的Javascript web应用程序
- 是否有任何开源web应用程序具有良好的QUnit(或JSUnit）测试用例
- Project和作为web应用程序发布的多个doGet(）脚本文件——需要澄清
- 无法在Windows 10 Cordova应用程序中从Web视图进行ajax调用
- 如何获取使用我们的脚本或web应用程序的网站名称
- 没有框架/DLL的VS Web应用程序项目
- 正确传输和保护用户'web应用程序的密码
- 检查Progressive web应用程序中的网络更改
- 如何在应用程序>Web浏览器控件中使用Google Maps API v3 ClientID
