无法使用 Html 服务为 DOM 元素设置固定位置答案

【问题标题】：unable to set fixed position for a DOM element using Html Service无法使用 Html 服务为 DOM 元素设置固定位置
【发布时间】：2012-09-24 22:38:59
【问题描述】：

我创建了一个脚本来使用 Html 服务发布以下 html 页面：

<html>
  <div id="fixeddiv"></div>
  <script>
    var div=document.getElementById("fixeddiv");
    div.style.position="fixed";
    alert(div.style.position);
  </script>
</html>

警报窗口显示一个空字符串。不能为div 元素设置固定位置吗？

【问题讨论】：

使用新的IFRAME 沙盒模式允许固定元素。使用此代码：HtmlService.SandboxMode.IFRAMEGoogle Documentation - Sandbox Mode

标签： position google-apps-script fixed

【解决方案1】：

我刚遇到同样的事情，答案似乎是否定的。显然他们担心固定的 div 是安全漏洞。

接下来他们也会想从我们的键盘上移除按键 ;-)

【讨论】：

【解决方案2】：

我用它来获得顶部全局导航栏的“固定”效果。它可能对您或其他人有用。

$(document).ready(function() {
    $( window ).scroll(function() {
        $( '.fixed' ).css('top', $( this ).scrollTop());
    });
});

注意：在 GAS 中，$( window ).scroll() 对我不起作用，因此我创建了一个 div 块，该块具有滚动条溢出的视口大小，并改为使用它。

【讨论】：

不错的解决方案。我创建了 div 并使用它工作的 $(window) 选择器。但是在某些时候 div 滚动停止并且窗口滚动开始工作。在那一刻，“固定”元素部分地离开了屏幕。你知道如何解决吗？非常感谢。

【解决方案3】：

我为此找到了另一个“解决方案”：

我创建了 2 个 div，fixedHeader 和 content

<div id="fixedHeader"></div>
<div id="content"></div>

css 代码，我们将#fixedHeader 设置为始终在顶部，并且对于#content，我们设置了与#fixedHeader 的高度匹配的填充顶部，这样元素就不会位于#fixedHeader 之下：

#fixedHeader {position:absolute; top:0;}
#content {padding-top:50px; overflow:auto;}

最后是 javascript 在文档加载时使 #contet 匹配视口的高度：

$(function(){ $("#content").css('height',window.innerHeight); }

希望对你有帮助

【讨论】：

您使用的是什么沙盒模式？原生，IFRAM？
我使用的是默认的（原生）。我不知道有不同的类型。你是对的，IFRAME 模式支持固定位置，所以我的答案现在完全没有价值。谢谢！

【解决方案4】：

出于安全考虑，似乎不允许使用position:fixed：http://code.google.com/p/google-apps-script-issues/issues/detail?id=1840

【讨论】：