注册 登录
编程论坛 → JavaScript论坛

如何让窗口的滚动条随着内容的变化自动滚动

qiqiy 发布于 2009-08-13 18:26， 708 次点击
http://

打开这个网站，右边有显示字幕功能，谁能告诉我这个显示字幕的窗口的滚动条如何跟着里面的高亮部分字自动滚动？

能有高人指个思路也行，感激，感激！！！！
4 回复
#2
weitang2009-08-14 10:03
我是这么做的，看看行不行

<html>
<body>
<style>
.red{
  background-color:#f00;
}
 
</style>
<script type="text/javascript">
<!--
var curr = 1;
function mytest(){
  document.getElementById("p"+curr).className="";
  curr++;
  if(curr>9) curr=1;
  document.getElementById("p"+curr).scrollIntoView();
  document.getElementById("p"+curr).className="red";
   
}
-->
</script>
<div id="mydiv" style=" overflow-y:scroll;width:200px;height:100px; border:1px solid #ccc;">
  <p id="p1" class="red">11111111111</p>
  <p id="p2">22222222</p>
  <p id="p3">333333333</p>
  <p id="p4">444444444</p>
  <p id="p5">5555555</p>
  <p id="p6">666666666</p>
  <p id="p7">777777777</p>
  <p id="p8">888888888</p>
  <p id="p9">9999999999</p>
</div>
<button type="button" onclick="mytest()">testbtn</button>
</body>
</html>
#3
qiqiy2009-08-14 11:45
感谢，感谢，我试试啊
#4
qiqiy2009-08-14 16:36
回复 2楼 weitang

用了你的代码，不过有个问题，当程序执行 scrollIntoView 方法的时候，页面也会跳转，我现在的问题是，只想让字幕里的窗口自动滚动，页不是整个页面也滚，如何设置啊，

在线等答案啊，急。。
#5
weitang2009-08-18 16:40
没太听明白，是字幕里的文字跳转还是滚动？

跳转比较简单，滚动的话应该用doScroll。但是我不知道怎么和你的声音同步滚动。

<html>  
<head>
<script>
var itimer;
function timeit(){
  itimer = setInterval("scrollit()", 100);
}
function scrollit(){
  oscrollme.doScroll("down");
}
</script>
</head>
<body onload="timeit()">
<div id=oscrollme style="width:200px;height:75px;overflow:scroll">
  <p id="p1" class="red">11111111111</p>  
  <p id="p2">22222222</p>  
  <p id="p3">333333333</p>  
  <p id="p4">444444444</p>  
  <p id="p5">5555555</p>  
  <p id="p6">666666666</p>  
  <p id="p7">777777777</p>  
  <p id="p8">888888888</p>  
  <p id="p9">9999999999</p>  
 
</div>
</body>
 
 
</html>
1
©2025, BC-CN.NET
电脑版