Javascript 动态显示隐藏在滚动条内的项目

我有一个网页，其中包含一个谷歌地图，左侧有许多标记，右侧有HTML表格，表示所有标记位置和国家名称（标签标签内）。表格使用最大高度和自动滚动css，因此表格中的某些项目在滚动中不可见

当我将鼠标悬停在国家/地区名称上时，相关标记将显示动画。反之亦然，当我将鼠标悬停在标记上时，表中的相关国家名称会更改标签颜色类别

通过鼠标悬停/移出标记，无法看到隐藏在滚动条内的表中的相关项

是否有任何方法可以动态显示表格中的隐藏项，当鼠标悬停在相关标记上时，该隐藏项在滚动条中不可见？或者动态自动滚动以显示项目

我的脚本：

 function MarkerToTableHover(marker) {  
             marker.addListener("mouseover", function(event) { 
             var link_id = parseInt(marker.id); 
             $("#table_selection label[data-id='" + link_id + "']").removeClass('label-info').addClass('label-warning'); 
             });
              marker.addListener("mouseout", function(event) { 
              var link_id = parseInt(marker.mid); 
             $("#table_selection label[data-id='" + link_id + "']").removeClass('label-warning').addClass('label-info');
             });
         }  

我的桌子：

<div style="max-height: 250px; overflow: auto">
            <table id="table_selection" class="table table-striped table-bordered ">
                <thead>
                    <tr>
                        <th >No</th>
                        <th >Country</th>
                        <th >State</th>
                        <th >City</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <!--dynamically append-->
                </tbody>
            </table>
        </div>

不
国家
陈述
城市
行动

您应该为div标签创建一个id：

<div id="scroll_table" style="max-height: 250px; overflow: auto"> 

---

希望将有所帮助

只是一个建议，您可以在td中设置一个数据属性，将其与标记关联起来。有点像。。然后可以使用回调函数绑定标记/表事件。。回调函数只是一个jqueryanimate，类似于$（'html，body'）.animate（{scrollTop:$（'td[attr selector]'））.offset（）.top}）。我的两分钱。但在这种情况下，我想你会希望动画发生在桌子上。@zsawaf谢谢，我正在尝试你的建议Terima kasih Pak@Sulung Nugroho，这个解决方案被证明是有效的。

        marker.addListener("mouseover", function(event) { 
         var link_id = parseInt(marker.id); 
         $("#table_selection label[data-id='" + link_id + "']").removeClass('label-info').addClass('label-warning'); 

     // add this line :
        $("#scroll_table").scrollTop($("#scroll_table").scrollTop() + $("#scroll_table .label-warning").position().top);                

         });