显示隐藏的项目内滚动动态

Show hidden item inside scroll dynamically

本文关键字：滚动 动态 项目 隐藏 显示      更新时间：2023-09-26

我有一个网页，其中包含一个谷歌地图，左侧有许多标记，右侧有HTML表，表示所有标记位置和国家名称(在标签标签内)。表格使用了max-height和auto-scroll css，所以表格中的一些项目在滚动中是不可见的。

当鼠标移到/移出国家名称时，相关的标记会显示动画。反之亦然，当鼠标移过/移出标记时，表中相关的国家名称将更改标签颜色类。

通过鼠标移过/移出标记，表中隐藏在滚动条中的相关项将不可见。

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

my script: 

 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');
             });
         }

My table:

<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">

，因为我认为在你的表格中，你只有一次标签警告在悬停/鼠标悬停期间，然后你可以添加这个脚本来显示项目

        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);                
         });

希望能有所帮助

相关文章：