我尝试使用指令在angular1中的表上创建顶部和底部滚动条。虽然它创建了滚动条，但即使表中有溢出，顶部滚动条拇指也不会出现。下面是代码。我到底哪里错了？
angular.module('app.doubleHorizontalScrollDirective', []).directive('doubleHorizontalScroll', [
＆＃39; $间隔＆＃39 ;, 函数（$间隔）{ 返回{ 限制：＆＃39; A＆＃39;，
link: function(scope, element, attr) {
// ng-repeat delays the actual width of the element.
// this listens for the change and updates the scroll bar
function widthListener() {
if (anchor.width() !== lastWidth)
updateScroll();
}
function updateScroll() {
// for whatever reason this gradually takes away 1 pixel when it sets the width.
$div2.width(anchor.width());
// make the scroll bars the same width
$div1.width($div2.width());
// sync the real scrollbar with the virtual one.
$wrapper1.scroll(function(){
$wrapper2.scrollLeft($wrapper1.scrollLeft());
});
// sync the virtual scrollbar with the real one.
$wrapper2.scroll(function(){
$wrapper1.scrollLeft($wrapper2.scrollLeft());
});
}
let anchor = element.find('[data-anchor]'),
lastWidth = anchor.width(),
listener;
// so that when you go to a new link it stops listening
element.on('remove', function() {
listener.cancel();
});
// creates the top virtual scrollbar
element.wrapInner("<div class='div2' />");
element.wrapInner("<div class='wrapper2' />");
// contains the element with a real scrollbar
element.prepend("<div class='wrapper1'><div class='div1'></div></div>");
let $wrapper1 = element.find('.wrapper1'),
$div1 = element.find('.div1'),
$wrapper2 = element.find('.wrapper2'),
$div2 = element.find('.div2');
// force our virtual scrollbar to work the way we want.
$wrapper1.css({
width: "100%",
border: "none 0px rgba(0, 0, 0, 0)",
overflowX: "scroll",
overflowY: "hidden",
height: "20px",
});
$div1.css({
height: "20px",
});
$wrapper2.css({
width: "100%",
overflowX: "scroll",
});
listener = $interval(function() {
widthListener();
}, 1000);
updateScroll();
}
}; }]）;
HTML：
<div id="scroll-container"
double-horizontal-scroll>
<div data-anchor>
<div class="video-analysis__default_table__header">
<table>
<tr>
<th class="video-analysis__default_table__header--index fixed-left-index "><!--<i class="fa fa-caret-up"></i>--></th>
<th class="video-analysis__default_table__header--checkbox fixed-left-checkbox"><div class="relative"></div></th>
<th class="video-analysis__default_table__header--star fixed-left-star" ng-click="sortClips('starred')">
<div class="relative">
<i ng-show="isSortType('starred') && sortDirection == 1" class="fa fa-caret-up"></i>
<i ng-show="isSortType('starred') && sortDirection == -1" class="fa fa-caret-down"></i>
</div>
</th>
<th ng-repeat="header in currentHeaders"
ng-class="'video-analysis__default_table__header--' + header.class"
ng-click="sortClips(header.sorting_column)"
>
<span ng-bind="header.header_title"></span>
<i ng-show="isSortType(header.sorting_column) && sortDirection == 1" class="fa fa-caret-up"></i>
<i ng-show="isSortType(header.sorting_column) && sortDirection == -1" class="fa fa-caret-down"></i>
</th>
<th ng-show="emptySpaceExists()"
ng-style="{'width' : remainingWidth + 'px'}">
</th>
<th class="video-analysis__default_table__header--plus fixed-right"
ng-click="show_table_data = !show_table_data; $event.stopPropagation();">
<span class="fa fa-cog fa-2x" ng-show="show_table_data"></span>
<span class="fa fa-minus-square-o fa-2x" ng-hide="show_table_data"></span>
</th>
</tr>
</table>
</div>
<div class="video-analysis__default_table__item" ng-hide="!show_table_data">
<div class="panel video-analysis__default_table__item__panel"
ng-repeat="item in clips track by $index"
ng-init="is_collapsed = true;"
ng-style="{'margin-bottom' : !is_collapsed ? '150px' : '0px'}"
>
<div class="panel-body video-analysis__default_table__item__panel__body">
<table>
<tbody id="clip_data_table">
<tr class="clickable" ng-click="playClip(item)" ng-mouseenter="color = 'clip-hover'" ng-mouseleave="color = ''">
<td class="video-analysis__default_table__item__panel__body--index fixed-left-index"
>
<div class="relative" ng-bind="$index + 1" ng-class="color"></div>
</td>
<td class="video-analysis__default_table__item__panel__body--checkbox fixed-left-checkbox">
<div class="relative" ng-class="color">
<input type="checkbox" ng-click="toggleClipCollection(item); $event.stopPropagation();" ng-checked="is_InClipCollection(item)">
</div>
</td>
<td class="video-analysis__default_table__item__panel__body--star fixed-left-star">
<div class="relative" ng-class="color">
<i class="fa fa-favorite"
ng-click="toggleStarredClip(item); $event.stopPropagation();"
ng-class="{active: isStarredClip(item)}"
>
</i>
</div>
</td>
<td ng-repeat="column in currentHeaders"
ng-class="'video-analysis__default_table__item__panel__body--' + column.class +' '+color"
>
<span ng-bind="getClipDatum(column.sorting_column, item)"></span>
</td>
<td ng-show="emptySpaceExists()"
ng-style="{'width' : remainingWidth + 'px'}">
</td>
<td class="video-analysis__default_table__item__panel__body--plus fixed-right"
ng-click="is_collapsed = !is_collapsed; $event.stopPropagation();">
<div class="relative" ng-class="color">
<span class="fa fa-plus-square fa-2x" ng-show="is_collapsed"></span>
<span class="fa fa-minus-square-o fa-2x" ng-hide="is_collapsed"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer video-analysis__default_table__item__panel__footer"
ng-hide="is_collapsed">
<div class="col-md-5 padding-0">
<table>
<tr class="teams-row">
<th class="team-name-column" ng-bind="item.game.awayteam.abbrev"></th>
<th class="positions-column"></th>
<th class="team-name-column" ng-bind="item.game.hometeam.abbrev"></th>
</tr>
<tr ng-show="item.lineup.length === 0"
ng-repeat="position in positions"
>
<td class="player-name-column text-center"><span ng-if="$index == 3">Data Not Available</span></td>
<td class="positions-column border-left-right"><span ng-bind="position"></span></td>
<td class="player-name-column text-center"><span ng-if="$index == 3">Data Not Available</span></td>
</tr>
<tr ng-show="item.lineup.length !== 0"
ng-repeat="(position_key, position) in item.lineup"
>
<td class="player-name-column text-left">
<span class="player-name"
ng-bind="'#'+position.away.iplayerjerseynumber+' '
+position.away.abbrev_name">
</span>
</td>
<td class="positions-column border-left-right">
<span ng-bind="position_key"></span>
</td>
<td class="player-name-column text-left">
<span class="player-name"
ng-bind="'#'+position.home.iplayerjerseynumber+' '
+position.home.abbrev_name">
</span>
</td>
</tr>
</table>
</div>
<div class="col-md-5 padding-0">
<div class="video-analysis-col-notes">
<div class="notes-title">
<span>notes: </span>
<button class="edit-button"
ng-click="toggleForm(notesEform)">
<span ng-show="notesEform.$visible">
<i class="fa fa-check"></i>save
</span>
<span ng-show="!notesEform.$visible">
<i class="fa fa-pencil"></i>edit
</span>
</button>
</div>
<div class="notes-content"
editable-textarea="item.detailed_notes"
buttons="no"
blur="submit"
onaftersave="saveXeditable(item.iclipid, item);"
e-form="notesEform"
ng-bind="item.detailed_notes"
>
</div>
</div>
</div>
<div class="col-md-2 padding-0">
<div class="dropdown-actions">
<div class="padding-2px">
<button class="action-button" ng-click="playClip(item)">play</button>
<button class="action-button" ng-click="editClip(item)">edit clip</button>
<!--<button class="action-button">add to playlist</button>-->
<!--<button class="action-button">share</button>-->
<button class="action-button" ng-click="syndicateClip(item)">syndicate</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#scroll-container {
margin-left: 106px;
margin-right: 40px;
}