本文目录一览：
请教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梅花雪)//’ /
titleiframe自适应加载的页面高度/title
/head
body
diviframe 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梅花雪)//’ /
titleiframe 自适应其加载的网页(多浏览器兼容)/title
script type=”text/javascript”
!–
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName(“IFRAME”);
for(var i=0; ia.length; i++) //author:meizz
{
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);
//window.attachEvent(“onresize”, iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener(‘load’, iframeAutoFit, false);
//window.addEventListener(‘resize’, iframeAutoFit, false);
}
//–
/script
/head
body
table border=”1″ width=”200″ style=”height: 400px; background-color: yellow”
tr
tdiframe 自适应其加载的网页(多浏览器兼容：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
参照 : jQuery全屏滚动插件fullPage.js
实现自动滚动思路:
所谓自动滚动也就是进入页面后,不使用鼠标等操作就可以自动翻页(滚动)
利用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.补充写一下火狐的
9.测试检查一下。
完成啦，啦啦啦～
我的截图：
缺点：这里我是一直对页面进行监听，导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻，整个就流畅一点。
ps：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/245576.html
微信扫一扫 
支付宝扫一扫 