关键词：
【中文标题】如何在 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(onlyIfScroll: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如何将tableView滚动到不一定在底部或顶部的新添加行？
】如何将tableView滚动到不一定在底部或顶部的新添加行？【英文标题】：HowtoscrolltableViewtoanewlyaddedrowthatisnotnecessarilyatthebottomortop?【发布时间】：2017-12-1019:46:11【问题描述】：好吧，标题说明了一切。我正在设计一个应用程序，... 查看详情
如何使用 SwiftUI 将 Stacks 固定在顶部和底部
】如何使用SwiftUI将Stacks固定在顶部和底部【英文标题】：HowfixStackstotopandbottomusingSwiftUI【发布时间】：2021-03-1821:15:03【问题描述】：你好吗？我需要将第一个zstack的所有内容（我使用两个zstack在第一个zstack背景上添加一个透明层... 查看详情
在 GridView 的顶部和底部添加空间
】在GridView的顶部和底部添加空间【英文标题】：AddspacetotopandbottomofGridView【发布时间】：2014-07-0517:21:29【问题描述】：我想，类似于页眉/页脚，但我只想支持空格，没有别的。目前我正在使用顶部/底部填充，但是当滚动时，内... 查看详情
修复 UIScrollView 顶部和底部的 CALayer
】修复UIScrollView顶部和底部的CALayer【英文标题】：FixingCALayerattopandbottomofUIScrollView【发布时间】：2010-12-1615:23:22【问题描述】：我正在继承UIScrollView并添加一些视觉元素。在顶部，应该有一个从黑色到透明的渐变，在底部有一个... 查看详情
如何检测 SwiftUI List 中的向上、向下、顶部和底部滚动
】如何检测SwiftUIList中的向上、向下、顶部和底部滚动【英文标题】：Howtodetectscrollup,scrolldown,topandbottominSwiftUIList【发布时间】：2020-11-2619:34:46【问题描述】：我有一个列表，我想在列表向上滚动时隐藏一个工具栏和标签栏。我... 查看详情
Angular Material 2：如何在右下角的 md-table 顶部放置一个 fab 按钮？
】AngularMaterial2：如何在右下角的md-table顶部放置一个fab按钮？【英文标题】：AngularMaterial2:Howtoputafabbuttonontopofthemd-tableatthebottomrightcorner?【发布时间】：2018-01-1520:05:03【问题描述】：我有一个显示一些记录的md表和一个分页器。我... 查看详情
如何在swift中仅向UIVIEW的顶部和底部添加阴影
】如何在swift中仅向UIVIEW的顶部和底部添加阴影【英文标题】：HowtoaddshadowonlytotopandbottomtoUIVIEWinswift【发布时间】：2021-05-0406:41:10【问题描述】：我是swift新手，我正在尝试向UIView添加阴影。我的代码是这样的ViewPay.layer.masksToBounds... 查看详情
如何使图像居中而不在较小的屏幕上创建水平滚动？
】如何使图像居中而不在较小的屏幕上创建水平滚动？【英文标题】：Howtocenteranimagewithoutcreatingahorizontalscrollonsmallerscreen?【发布时间】：2021-03-3009:37:58【问题描述】：我正在尝试使图像居中。我尝试了\'left：50%\'，这很有效，但... 查看详情
即使水平滚动，如何使放置在fabricjs对象顶部的DOM元素保持在那里
】即使水平滚动，如何使放置在fabricjs对象顶部的DOM元素保持在那里【英文标题】：HowtomakeDOMelementthatisplacedontopoffabricjsobjectstaythereevenwhenscrollinghorizontally【发布时间】：2021-06-1822:30:52【问题描述】：我有一个包含对象数组的画布... 查看详情
在顶部和底部停止滚动uitableview？(代码片段)
...以在最顶部的单元格上显示背景（有时用于刷新））无论如何只是让单元格的顶部边缘成为“绝对顶部”？所以视图只显示细胞？答案由于UITableView是UIScrollview的子类，因此将'bounces'属性设置为NO就足够了。编辑：您可能需要将'a... 查看详情
滚动时如何保持 <li> 元素固定在 <ul> 元素的顶部和底部
】滚动时如何保持<li>元素固定在<ul>元素的顶部和底部【英文标题】：Howtokeep<li>elementsfixedtopandbottomof<ul>elementwhenscrolling【发布时间】：2016-03-2622:57:59【问题描述】：我有一个固定高度的ul，如果滚动条出现太多... 查看详情
如何实现顶部带有标题的水平滚动集合视图？
】如何实现顶部带有标题的水平滚动集合视图？【英文标题】：Howtoimplementahorizontally-scrollingcollectionviewwithaheaderontop?【发布时间】：2020-02-2707:41:17【问题描述】：我想要一个水平滚动的集合视图，但我也希望它的顶部和右侧有一... 查看详情
如何检查滚动位置是在 ListView 的顶部还是底部？
】如何检查滚动位置是在ListView的顶部还是底部？【英文标题】：HowtocheckifscrollpositionisattoporbottominListView?【发布时间】：2018-03-0419:18:01【问题描述】：我正在尝试实现无限滚动功能。我尝试在NotificationListener内部使用ListView来检... 查看详情
向 UITableViewController 添加顶部/底部视图？
...在我的故事板中，我有UITableViewController，它有自定义类。如何在表格视图的顶部和底部添加UIView对象？我是否必须在UIView中创建UITableView和两个所需的视图，然后手动初始化我 查看详情
水平和垂直可滚动的大表格
...表格溢出屏幕宽度作为高度。我还希望将表头固定在表格顶部，并将其副本固定在表格底部。经过深入的谷歌搜索和大量有保证的代码测试后，我发现了 查看详情
在 Recyclerview Kotlin 的顶部、中间和底部添加分隔线
】在RecyclerviewKotlin的顶部、中间和底部添加分隔线【英文标题】：AddDividerTop,MiddleandBottomofRecyclerviewKotlin【发布时间】：2021-11-2305:24:30【问题描述】：嘿，我想在Recyclerview的顶部、中间和底部显示分隔线。Howtoadddividersandspacesbetween... 查看详情
如何检测 UITableView 何时滚动到最底部/顶部？
】如何检测UITableView何时滚动到最底部/顶部？【英文标题】：HowcanIdetectwhenaUITableViewhasbeenscrollpasttheverybottom/top?【发布时间】：2015-06-1301:52:08【问题描述】：我有一个包含3个tableView的视图。一个是“主表视图”，然后我有一个“... 查看详情
粘性侧边栏：向下滚动时固定在底部，向上滚动时固定在顶部
...直在寻找解决我的粘性侧边栏问题的方法。我对我希望它如何行动有一个具体的想法；实际上，我希望它在您向下滚动时粘在底部，然后一旦您向上滚动，我希望它以流畅的运动（不跳跃）粘在顶部。 查看详情