如何在 md-table 的顶部和底部添加水平滚动条?

Posted

技术标签:

【中文标题】如何在 md-table 的顶部和底部添加水平滚动条?【英文标题】:How can i add horizontal scrollbar on top and bottom of md-table? 【发布时间】:2021-08-03 02:19:11 【问题描述】:

我在表格的顶部和底部实现了一个水平滚动条,但我只能看到底部的滚动条。但我希望这个滚动条也位于表格顶部。

我已经使用 jquery 代码来滚动和指示表格。

预期:

目前,我只看到底部栏

demo

演示你可以看到工作代码

angular.module('components', [])
.directive('master',function ()  //declaration
    function link(scope, element, attrs)  
        scope.$watch(function() 
            scope.duelScroll =  
                width:element[0].offsetWidth+'px' 
            ;
        );
    
    return 
        restrict: 'AE', 
        link: link 
    ;
)
angular.module("datatable", ['ngRoute', 'ngMaterial', 'md.data.table']).controller("datacontroller", ['$scope', function($scope) 
   $(function () 
            $("[name='upperScroll']").scroll(function () 
                $("[name='wireTable']").scrollLeft($("[name='upperScroll']").scrollLeft());
            );
            $("[name='wireTable']").scroll(function () 
                $("[name='upperScroll']").scrollLeft($("[name='wireTable']").scrollLeft());
            );
            $("[name='upperScroll']").css( 'height': ($("[name='wireTable']").height() + 'px') );
        );
        $scope.DataSet = [1];
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">
<div ng-app="datatable" ng-controller="datacontroller">


<form name="Information">
    <md-content layout-padding ng-repeat="Data in DataSet">
        <ng-form name="invoice$index">
            <md-card style="background-color:Gainsboro">

                <div ng-init="isShowAll =true" ng-show="isShowAll">


                    <md-card>
                        <div name="upperScroll" style="overflow-x:scroll; overflow-y: hidden; max-height:20px; width:100%">
                            <div name="innerScroll" ng-style="duelScroll" style="height:20px;"></div>
                        </div>
                        <div ng-style="getStyle($index)">
                            <md-table-container name="wireTable" infinite-scroll="loadMore($index)" infinite-scroll-distance="1" infinite-scroll-parent="true" ng-init="isShow=true" ng-show="isShow">
                                <table master md-table md-progress="aPromise" name="innerWireTable">
                                    <thead md-head md-order="sortOrder" style="background-color:#e0dcff; ">
                                        <tr md-row style="height:45px">
                                            <th md-column><span>Test1</span></th>
                                            <th md-column><span>Test2</span></th>
                                            <th md-column><span>Test3</span></th>
                                            <th md-column><span>Test4</span></th>
                                            <th md-column><span>Test5</span></th>
                                            <th md-column><span>Test6</span></th>
                                            <th md-column><span>Test7</span></th>
                                            <th md-column><span>Test8</span></th>
                                            <th md-column><span>Test9</span></th>
                                            <th md-column><span>Test10</span></th>
                                            <th md-column><span>Test11</span></th>
                                            <th md-column><span>Test12</span></th>
                                            <th md-column><span>Test13</span></th>
                                            <th md-column><span>Test14</span></th>
                                            <th md-column><span>Test15</span></th>
                                            <th md-column><span>Test16</span></th>
                                            <th md-column><span>Test17</span></th>
                                            <th md-column><span>Test18</span></th>
                                            <th md-column><span>Test19</span></th>
                                            <th md-column><span>Test20</span></th>
                                           
                                        </tr>

                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td md-cell>Test1</td>
                                            <td md-cell>Test2</td>
                                            <td md-cell>Test3</td>
                                            <td md-cell>Test4</td>
                                            <td md-cell>Test5</td>
                                            <td md-cell>Test6</td>
                                            <td md-cell>Test7</td>
                                            <td md-cell>Test8</td>
                                            <td md-cell>Test9</td>
                                            <td md-cell>Test10</td>
                                            <td md-cell>Test11</td>
                                            <td md-cell>Test12</td>
                                            <td md-cell>Test13</td>
                                            <td md-cell>Test14</td>
                                            <td md-cell>Test15</td>
                                            <td md-cell>Test16</td>
                                            <td md-cell>Test17</td>
                                            <td md-cell>Test18</td>
                                            <td md-cell>Test19</td>
                                            <td md-cell>Test20</td>
                                            
                                           

                                        </tr>
                                    </tbody>



                                </table>
                            </md-table-container>
                        </div>

                    </md-card>
                </div>
            </md-card>

        </ng-form>
    </md-content>

</form> 


</div>

有人帮我解决这个问题

我已经检查了一些与滚动条相关的问题,但我想修复这个代码,所以请有人帮我解决这个问题 另外,如果我们有多个表格,它应该支持滚动http://jsfiddle.net/e1w0vmns/1/

【问题讨论】:

这能回答你的问题吗? horizontal scrollbar on top and bottom of table 我已经检查过了,但我需要专家帮助来修复此代码,我只想了解错误。 停止发布关于您在 SO 上发现的所有其他问题的帮助请求。问你的问题,等待答案;不要在 SO 上的每个问题上发布您的链接,谢谢。不好 --> ***.com/questions/3934271 明白,我已经删除了我的评论。谢谢。 【参考方案1】:

对您的代码做了一些更改。

    将基于 ng-repeat 索引的唯一类添加到 div upperScroll

    class="upperScroll$index+1" custom-index="$index+1"
    

    wireTable添加了类似的类

    class="wireTable$index+1" custom-index="$index+1" 
    

    更新了脚本以使用这些类来制作特定目标以支持多个表格滚动

    $("[name='upperScroll']").scroll(function () 
         var upperIndex = $(this).attr('custom-index');
         $(".wireTable"+upperIndex).scrollLeft($(this).scrollLeft());
    );
    $("[name='wireTable']").scroll(function () 
         var wireIndex = $(this).attr('custom-index');
         $(".upperScroll"+wireIndex).scrollLeft($(this).scrollLeft());
    ); 
    

Jsfiddle - http://jsfiddle.net/7t9pmkqa/

【讨论】:

【参考方案2】:

我对 angular 不是很熟悉,但是通过演示,我发现问题在于 innerScroll 的宽度。您只需将该宽度设置为等于表格宽度

$("[name='innerScroll']").width($("[name='innerWireTable']").width());

您可以在此处找到工作演示 working demo

【讨论】:

如果我有多个表只有第一个表滚动正在工作其他人或不工作jsfiddle.net/e1w0vmns/1 实际上要处理多个表,您需要更改逻辑。您发布的问题仅与一张桌子有关。你之前应该提到过这些 很抱歉给您带来不便。我在顶层有 ng-repeat。现在你只看到一个表,因为我在数组中只设置了一个元素,但我们的实现应该支持多个 elaments(多个表)对【参考方案3】:

你试过 CSS 溢出属性吗?

溢出:滚动; /* 滚动条始终可见/ 溢出:自动; / 根据需要显示滚动条 */

【讨论】:

如何在表格中制作双滚动条(顶部和底部)【参考方案4】:

使用方法:

    要使用这个插件,只需在 jQuery 库之后包含主 javascript 文件 jquery.doubleScroll.js: 然后在可滚动容器上调用函数 doubleScroll() 并完成。 $('.element').doubleScroll(); 在调整窗口大小时重新计算顶部 ScrollBar 要求。 $('.element').doubleScroll( resetOnWindowResize:真 ); 设置等待最后一次更新事件的时间(当浏览器在调整大小期间不断触发调整大小事件时很有用): $('.element').doubleScroll(timeToWaitForResize: 30); 如果底部滚动条不存在,则隐藏顶部滚动条。 $('.element').doubleScroll(onl​​yIfScroll:true); 覆盖默认 CSS 样式: $('.element').doubleScroll( 滚动CSS: 'overflow-x':'auto','overflow-y':'hidden', 内容CSS: 'overflow-x':'auto','overflow-y':'hidden', ); 指定要用作滚动引用的元素。如果未指定任何内容,则使用第一个子元素。 查看源代码 $('.element').doubleScroll( 内容元素:未定义 );

【讨论】:

你能检查一下这个jsfiddle.net/e1w0vmns/1,它有 jquery lib 在 fiddle

以上是关于如何在 md-table 的顶部和底部添加水平滚动条?的主要内容,如果未能解决你的问题,请参考以下文章

如何停止 UITableView 在顶部和底部的滚动?

修复 UIScrollView 顶部和底部的 CALayer

如何使用 SwiftUI 将 Stacks 固定在顶部和底部

即使水平滚动,如何使放置在fabricjs对象顶部的DOM元素保持在那里

如何在 react-native 中的 onPress 按钮上滚动顶部?

如何检测 SwiftUI List 中的向上、向下、顶部和底部滚动