Question

我有一个div（transcript_container），其中包含音频播放的字幕。每个字幕与音频同步。

div的高度为200px。当字幕列表长度超过200像素时，文本会自动向上滚动，以便突出显示的字幕位于顶部，并始终在div容器中可见。这适用于除Firefox之外的所有浏览器。

这是HTML：

<div style="display:table; margin-left:auto; margin-right:auto;">
<div style="display:table-row;">

 <div class="transcript_container" id="transcript_container">
   <div style="height:200px; overflow:-moz-scrollbars-vertical;"> (I had to add this div with the overflow for firefox otherwise the text wouldn't be contained in the div in firefox)
       Subtitles......
       ...............
   </div>
 </div>
</div>
</div>

这是CSS：

.transcript_container{
  display:table-cell;
  width: 500px;
  height:200px; 
  border: 1px solid #999;
  -webkit-border-radius: 5px 5px 5px 5px; 
  -moz-border-radius: 5px 5px 5px 5px; 
  border-radius: 5px 5px 5px 5px;
  text-align:left;
  color:#036;  
  margin-left:auto;
  margin-right:auto;
  overflow:scroll;
}

这是jQuery脚本：

jQuery('.subtitle_highlight').each(function(){

   if (jQuery(this).offset().top - jQuery('#transcript_container').offset().top > 200){     

    jQuery('#transcript_container').animate({scrollTop: jQuery('#transcript_container').scrollTop() + 200 + 'px'}, 300);                            

    }
 });

示例：

----------------------------------------DIV: Transcript_Container------
 subtitle 1
 subtitle 2
 subtitle 3
----------------------------------------------End of DIV---------------
 subtitle 4  (hidden area)
 subtitle 5
 subtitle 6

当副标题3突出显示时，副标题4向上滚动到DIV的顶部并变为可见。同步继续与字幕4,5和6。在Firefox中，字幕4在突出显示时不会显示在div的顶部，但仍保持隐藏状态。

如何使它兼容firefox呢？ ScrollTop是否可以替代所有浏览器？

DIV中的ScrollTop在Firefox中不起作用

0 个答案: