js网页自动滚动,html 自动滚动

发布时间：2023-12-08

js网页自动滚动,html 自动滚动

更新：2022-11-18 04:47

本文目录一览：

  1. 请教JS高手，怎么让Iframe中的页面自动滚屏
  2. js怎么控制网页滚动到指定位置
  3. fullpage.js自动滚动怎么设置
  4. js控制页面滚动（实例）

请教JS高手，怎么让Iframe中的页面自动滚屏

在父页面直接滚子页面的屏也是可以的。 frames["iframe"].document.body.scrollTop 你一直给这个对象累加数字也是滚屏的效果了 main.htm:

<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
  <meta name='author' content='F.R.Huang(meizz梅花雪)//' />
  <title>iframe自适应加载的页面高度</title>
</head>
<body>
  <div><iframe src="child.htm"></iframe></div>
</body>
</html>

child.htm:

<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
  <meta name='author' content='F.R.Huang(meizz梅花雪)//' />
  <title>iframe 自适应其加载的网页(多浏览器兼容)</title>
  <script type="text/javascript">
    function iframeAutoFit() {
      try {
        if (window != parent) {
          var a = parent.document.getElementsByTagName("IFRAME");
          for (var i = 0; i < a.length; i++) {
            if (a[i].contentWindow == window) {
              var h1 = 0, h2 = 0, d = document, dd = d.documentElement;
              a[i].parentNode.style.height = a[i].offsetHeight + "px";
              a[i].style.height = "10px";
              if (dd && dd.scrollHeight) h1 = dd.scrollHeight;
              if (d.body) h2 = d.body.scrollHeight;
              var h = Math.max(h1, h2);
              if (document.all) {
                h += 4;
              }
              if (window.opera) {
                h += 1;
              }
              a[i].style.height = a[i].parentNode.style.height = h + "px";
            }
          }
        }
      } catch (ex) {}
    }
    if (window.attachEvent) {
      window.attachEvent("onload", iframeAutoFit);
    } else if (window.addEventListener) {
      window.addEventListener('load', iframeAutoFit, false);
    }
  </script>
</head>
<body>
  <table border="1" width="200" style="height: 400px; background-color: yellow">
    <tr>
      <td>iframe 自适应其加载的网页(多浏览器兼容：IE5.5＋、Mozilla、Firefox、Opera、Netscape7.2+、Safari3等，支持XHTML)</td>
    </tr>
  </table>
</body>
</html>

很多人反应在IE7里使用它会死机，那是因为在自适应高度时触发了 window.onresize 事件，而这个事件又去调用这个调整 iframe 高度的函数，产生了死循环调用。 这段代码里我对 iframe 所在的父元素也设定了一个高度，以防止iframe 高度变化时页面跳动的太厉害，在调用的时候可酌情使用这个设置。

js怎么控制网页滚动到指定位置

使用 scrollBy(x轴,y轴) 方法就可以使文档对象滚动到距离浏览器窗口坐标的指定位置上。

注意事项：

  • 文档对象可以看做是网页所有可见内容的存储容器，网页所有可见内容称为页面。
  • 网页x轴坐标与数学一样，但是y轴坐标是相反的，向下是正数，向上是负数。
  • 页面移动出去的距离不能和滚动条移动出去的距离对等。
  • 滚动条移动出去多少像素才能等达到页面要移动出去的像素是根据整个页面的尺寸比例计算的。
  • 这个文档对象移动出去的距离在坐标系上是一定是负数，但是我们要用正数来表示它距离浏览器窗口0,0坐标的距离。
  • 这个方法移动的是文档对象和浏览器存储文档对象的窗口0,0位置坐标的距离，绝不是滚动条和文档对象的距离。
  • 移动出去的距离就是文档对象不可见部分内容和浏览器存储文档对象的窗口0,0坐标的距离。
  • 这个方法使用 scroll 命名只是因为文档对象移动出去的距离需要滚动条滚动才能达到效果，便于记忆而已。
  • scrollBy() 方法是 window 对象下的方法，document 对象及其子对象没有该方法。
  • document 对象及其子对象如果要获取或设置元素内部内容滚动出去的距离，请使用 scrollTop 和 scrollLeft，注意该方法是计算的不可见部分移动出去的内容顶端距离容器的距离是从容器内边距开始计算，而不是边框。
  • 使用 scrollBy() 必须存在滚动条，且有一定的高度才能看出方法的效果。

fullpage.js自动滚动怎么设置

目的：实现自动滚动

工具：fullpage.js

页面中需要引用的JS：

<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.fullPage.js" type="text/javascript" charset="utf-8"></script>

实现自动滚动思路：

所谓自动滚动也就是进入页面后，不使用鼠标等操作就可以自动翻页（滚动）。利用JS给定一个时间范围，例如3秒调用一次滚动方法，就可以实现。

// 获取一共有多少个需要滚动的锚点
var len = $("#Id div").length;
// 设定自然数，默认为0
var num = 0;
// 此方法为，页面停留5秒后自动滚动进入下一屏
setTimeout(function() {
  $("#Id div").eq(num).fullpage();
  ai++;
  // 如果ai等于锚点数时，将ai重新赋值为0
  if (ai == len) {
    num = 0;
  }
}, 5000);

js控制页面滚动（实例）

目标描述：

多个图片排列下来，按右边的小按钮，抵达相应位置，鼠标滑动，抵达下一图，或者上一图。

知识点：

  • onmousewheel
  • addEventListener
  • scrollTo
  • setTimeout

过程：

  1. body 宽、高钉死，100vw，100vh，overflow: hidden 使得不出现滚动条，不然不好看。
  2. 图片放进去，排起来（注意：默认空隙的处理，可以使用 flex 布局，空隙就不见了）。
  3. 制作相对于视窗的按钮，几张图片就几个按钮（position: fixed，计算一下高度，可以利用 calc 计算 top 使得上下居中）。
  4. 美化一下，CSS 写写。
  5. 先写简单的按钮事件。
  6. 写监听滑动事件（onmousewheel 在火狐无效，DOMMouseScroll 只在火狐有效）。
    • React 在 componentDidMount 的时候监听。
  7. 补充写一下火狐的。
  8. 测试检查一下。 完成啦，啦啦啦～

我的截图：

缺点：这里我是一直对页面进行监听，导致滑动过快的时候动画效果开始执行对时间延后。体现为滑动得轻，整个就流畅一点。 PS：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。

推荐文章