文章/答案/技术大牛

发布

社区首页 >问答首页 >如何让Iframe像电影字幕一样向下滚动？

问如何让Iframe像电影字幕一样向下滚动？
EN

Stack Overflow用户

提问于 2016-03-09 00:52:01

回答 2查看 99关注 0票数 0

我有一个Iframe，它循环通过一个已发布的Google sheets数组。有没有一种方法可以让iframe随时间向下滚动，以显示已发布URL中的所有数据？

理想情况下，我想让结果表单从顶部开始，超过30秒，向下滚动到底部，然后当在底部时，切换到下一个结果表单。然后，这将不断地从站点1循环到站点5。

下面是我的代码：

    var sites = [
      "https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=0&single=true",
      "https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1991236368&single=true",
      "https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=205619546&single=true",
      "https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1480439822&single=true",
      "https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1101347808&single=true"

    ];
    var currentSite = sites.length;

    $(document).ready(function() {
      var $iframe = $("iframe").attr("src", "https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=0&single=true");
      setInterval(function() {
        (currentSite == 1) ? currentSite = sites.length - 1: currentSite = currentSite - 1;
        $iframe.attr("src", sites[currentSite]);
      }, 10000);
    });

    iframe {
      height: 768px;
      width: 1024px;
      border: 2px solid gray;
    }
    body {
      width: 1024px;
      length: 768px;
      background-color: #C9C9C9;
      margin: 0 auto;
    }
    #heading-wrapper {
      margin: 0 auto;
      background-color: #FF6600;
      border: 2px solid black;
      text-align: center;
      width: 1024px;
    }
    #heading-wrapper h1 {
      font-family: Arial;
      vertical-align: middle;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<head>
  <title>Live Results</title>
</head>

<body>
  <div id="heading-wrapper">
    <h1>Live Results</h1>
  </div>
  <iframe></iframe>
</body>

我甚至不知道是否有可能让它慢慢向下滚动。

iframe

javascript

jquery

html

css

回答 2

Stack Overflow用户

发布于 2016-03-09 01:03:27

看一看

iframe.contentWindow.scrollTo(x, y);

您可以创建一个函数，以递增的y滚动量定期调用该函数。

票数 0

Stack Overflow用户

发布于 2016-03-09 02:10:30

使用set interval并更改包含元素的scrollTop属性：

setInterval(changeScrollPosition, 50); // every 50 milliseconds

function changeScrollPosition(el)
{
    var currentTop = el.scrollTop;
    el.scrollTop = currentTop + howMuchYouWantToScrollBy;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35873232

复制

相似问题

问如何让Iframe像电影字幕一样向下滚动？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让Iframe像电影字幕一样向下滚动？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让Iframe像电影字幕一样向下滚动？
EN