javascript中如可控制iframe的滚动条位置

Posted 2023-05-13

我做了一个聊天室，嵌套了两个iframe，一个name叫mainframe,用来显示聊天纪录，另一个name叫rightframe，用来显示进入的用户名，我想让mainframe的滚动条始终在最下端，rightframe的滚动条始终在最上端，
请问：用javascript如何来实现？
急！！！

滚动条始终在最下端:
window.onload=function ()
document.documentElement.scrollTop=parseInt(document.body.offsetHeight)-parseInt(document.documentElement.offsetHeight)+100;

/*上面的加100是因为取offsetHeight的值不是很准,所以自己改到准为止*/

滚动条始终在最上端:
window.onload=function()
document.documentElement.scrollTop=0;
参考技术A

方案有2种：

第一种：

      通过iframe的scrolltop属性进行位置设置

第二种：

     通过jquery的scrolltop方法进行位置设置。

示例

<iframe width="100%" height="100%" id="ghrzFrame" frameborder="0" scrolling="auto" name="ghrzFrame" src="iframe.html"></iframe>
第一种：
document.getElementById('ghrzFrame').scrollTop=50;//滚动50的位置，
第二种：
$('#ghrzFrame').scrollTop(50);滚动到50的位置

使用 Javascript 在带有隐藏滚动条的 iframe 上模拟 iOS 上的滚动

【中文标题】使用 Javascript 在带有隐藏滚动条的 iframe 上模拟 iOS 上的滚动

【英文标题】：Simulate scrolling on iOS, with Javascript, on an iframe with hidden scrollbars

【发布时间】：2015-11-05 15:31:41

【问题描述】：

我有一个带有 scrolling="no" 和溢出的 iframe: hidden;

我需要能够单独使用 JavaScript 从父窗口或 iframe 中模拟滚动（没关系）。

在 iOS 8 (iPhone) 上进行测试，我似乎无法通过 touchmove 事件处理程序（或任何方式 - 甚至尝试 setInterval）移动 iframe。

对于移动 iFrame 的代码，我在 iframe 中尝试了 window.scrollBy() 和 window.scrollTo()。我调试过，没有异常。我可能遗漏了什么。

提前致谢。

【参考方案1】：

你只能通过 css 来实现它。尝试以下操作到您想要触摸移动的selectors。

webkit-overflow-scrolling: touch; /* lets it scroll lazy */

但您必须使用overflow: auto 才能使其正常工作。如果您希望将其保持在特定的 width 或 height 内，请使用固定值。

【讨论】：

我试试看。谢谢！