如何控制框架页的滚动

二刚03

二刚03

2016-02-19 13:15

下面请跟着图老师小编一起来了解下如何控制框架页的滚动,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

 解决思路

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

    利用框架文档中window对象的scrollBy方法来滚动。

 具体步骤

 1. 包含框架页的代码。








  2.demo.htm页代码。这里仅仅是为了测试效果,可以替换为你自己的页面。



  注意:如果iframe所加载的页为站外URL,将导致跨域问题,拒绝访问。凡是涉及到对框架页的访问及控制,都会有跨域问题。

  特别提示

  代码运行后的效果如图1.6.8所示。鼠标移上四上按钮上后,iframe内所加载的页面将分别向上、下、左和右四个方面滚动,在按下鼠标时滚动速度加快,松开鼠标(仍然在按钮上)时恢复速度,鼠标移开后滚动停止。

1.6.8 控制iframe的滚动

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)特别说明

  本例主要是window对象的scrollBy方法的应用。通过设置横向滚动速度stepX和纵向滚动速度stepY为全局变量,在鼠标移上时在函数中用setInterval不断调用scrollBy方法滚动页面,通过参数控制滚动方向,在鼠标按下时放大全局变量stepX或stepY的值,人而达到加快滚动速度的效果,而鼠标移开后再用clearInterval方法清除之前的setInterval事件以停止滚动。

  scrollBy 将窗口滚动 x 和 y 偏移量。

  setInterval 每经过指定毫秒值后计算一个表达式。

  clearInterval 使用 setInterval 方法取消先前开始的间隔事件。

展开更多 50%)
分享

猜你喜欢

如何控制框架页的滚动

Web开发
如何控制框架页的滚动

用javascript控制iframe滚动的代码

Web开发
用javascript控制iframe滚动的代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

滚动经典最新话题[prototype框架]下编写

Web开发
滚动经典最新话题[prototype框架]下编写

CSS代码:控制IE滚动条

Web开发
CSS代码:控制IE滚动条

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ImageFlow可鼠标控制图片滚动

Web开发
ImageFlow可鼠标控制图片滚动

有哪些提升单页滚动体验的高级技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
有哪些提升单页滚动体验的高级技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

我的正则

我的正则

关于初始化C++类成员

关于初始化C++类成员
下拉加载更多内容 ↓