添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢?

一:去掉全部的滚动条

第一个方法: iframe 有一个scrolling属性,它有 auto , yes , no 这三个值。

         scrolling : auto -----在需要的时候滚动条出现
         scrolling : yes ------始终显示滚动条
         scrolling : no -------始终隐藏滚动条
         当设置   scrolling : no 时,全部的滚动条就没有了。

第二个方法:我发现除了 scrolling 可以去掉全部的滚动条外,还有另一个方法,在嵌入的页面里设置 body{overflow:hidden} ,这样也可以将滚动条去掉,而且这也是当我们只想去掉某一个滚动条所使用的属性。

二:去掉右边的滚动条且保留底下的滚动条

如果只想保留底下的滚动条,那么可以在嵌入的页面里设置 body{overflow-x:auto ; overflow-y:hidden;}

三:去掉底下的滚动条且保留右边的滚动条

在嵌入的页面里设置

body{overflow-x:hidden;overflow-y:auto;}

我们已经知道了这两个属性都可以设置滚动条的显示和隐藏,那么当两个同时设置时,会出现哪个效果呢?

通过检测,我发现当 scrolling = " auto " 或者 " yes " 时,如果设置了 body,那么就会使用body里的设置;当 scrolling = " no " 时,不管body设置了什么,都会使用 scrolling 的设置,即全部的滚动条都被去掉了。

版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://www.liweiliang.com/1086.html

标签: none

  • 丽丽 : 没有生效
  • admin : vuex的数据更新它会自动跟着更新的,当然用vuex有可能会存在...
  • 土家肸哥 : vuex-persist保存的数据,如果更新了怎么办?好像这个数...
  • 五月 : 默认每个页面的 onload 函数中的options参数中都可以...
  • 五月 : ?前面是指定页面 后面 id = 123 意思是 key是id...
  • Margie : 不好意思 我搞错了 有用的
  • Margie : 尝试了 也是无效
  • writeessay : Thank you! Very good stuff.
  • 小小菜鸟 : 你好!为啥我定义了onShareAppMessage(optio...
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • May 2023
  • April 2023
  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • June 2022
  • April 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • April 2021
  • March 2021
  • February 2021
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • July 2019
  • June 2019
  • May 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • 文章 RSS
  • 评论 RSS
  • Typecho
  •