如何控制框架页的滚动

2016-02-19 13:15 1 1 收藏

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

【 tulaoshi.com - Web开发 】

 解决思路

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

 具体步骤

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

 1. 包含框架页的代码。








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



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

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

  特别提示

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

1.6.8 控制iframe的滚动

特别说明

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

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

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

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

来源:https://www.tulaoshi.com/n/20160219/1603512.html

延伸阅读
标签: Web开发
    1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-...
不知道大家发现没有,近来很多大公司宣传新产品和专题推广的时候,都趋向于使用单页啦。可别小看单页面,少即是多,在这个页面里体现美妙的视觉和精湛的技术,绝对是能够吸引很多访客的眼球滴。 单页网站不会使浏览者感到混乱,查阅关键信息时只需点击或者滑动鼠标,并且你可以将自己最棒的作品置顶居中。接下来将带你体验20个带有视差效果的H...
单页设计最近变得相当的流行,不管是一些企业还是个人都在不断的创意出有想法的单页来。加上现在每天成千上万的App应用不断的出现。而每个App都有一个简单的单页介绍。而且这些单页都设计的相当有创意。比起其他的网站,这些单页通过视差滚动设计让网站更加的生动,也会让浏览者眼前一亮。千变万化的画面引导,确实有着迷人的吸引力。今天我们...
标签: Web开发
1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本...
标签: Web开发
自从dhtml出现以来,微软对dhtml功能的加强就没有停止过,在微软最新的游览器internet explorer 5.5的的ie5.5增加了许多新的样式表内容,对滚动条的样式进行修改也是其中之一,下面我们简单地介绍一下涉及浏览器滚动条的样式表内容: 1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内...

经验教程

238

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部