Javascript IE11/固定标题/可滚动表格-垂直/水平滚动，当鼠标在文本光束/默认值之间闪烁时导致滚动滞后

对于下面的AngularJS指令，我只在IE11中遇到了一个问题，我认为这是由于我的指令引起的，但似乎与表单元格文本上方的光标位置有关。当光标保持在文本上方时，垂直水平滚动时会发生这种情况。我观察到鼠标在文本（I）垂直光束和箭头默认光标之间闪烁。当我在闪烁过程中移动鼠标时，滚动响应更加平稳

当我旋转滚轮时，鼠标静止不动时，表格滚动延迟约5-6秒，然后我的鼠标在html表格单元格中停止闪烁（仅上面的文本），然后随着表格再次响应，它会恢复正常

这里发生了什么，我该如何解决这个问题

示例代码笔（要在IE11中查看，请在调试模式下打开并将url复制到IE11中）

模板

<div class="container-fluid">
    <div ng-controller="ActionController" ng-app="Action">
       <init-action/>
        ActionItems
        <div class="tableheader">
        <table id="actionitems" class="table-striped table-condensed table-bordered sortable action grid"> <!--datatable="" dt-options="dtOptions"-->
             <thead>
                <tr>  
                    <th>
                        Edit
                    </th>
                    <th ng-click="sort('actionitemid')" ng-class="{reverse: reverse}">
                        ID                       
                    </th>
                    <th ng-click="sort('actionitemtitle')" ng-class="{reverse: reverse}">
                        Action Item Title 
                    </th>
                    <th ng-click="sort('status')" ng-class="{reverse: reverse}">
                        Status
                    </th>                         
                    <th ng-click="sort('critlevel')" ng-class="{reverse: reverse}">
                        Criticality
                    </th>
                    <th ng-click="sort('assignor')" ng-class="{reverse: reverse}">
                        Assignor
                    </th>
                    <th ng-click="sort('owner')" ng-class="{reverse: reverse}">
                        Owner
                    </th>
                    <th ng-click="sort('altowner')" ng-class="{reverse: reverse}">
                        Alt Owner
                    </th>
                    <th ng-click="sort('approver')" ng-class="{reverse: reverse}">
                        Approver
                    </th>
                    <th ng-click="sort('assigneddate')" ng-class="{reverse: reverse}">
                        Assigned Date
                    </th>
                    <th ng-click="sort('duedate')" ng-class="{reverse: reverse}">
                        Due Date
                    </th>
                    <th ng-click="sort('ecd')" ng-class="{reverse: reverse}">
                        ECD
                    </th>
                    <th ng-click="sort('completiondate')" ng-class="{reverse: reverse}">
                        Completed
                    </th>
                    <th ng-click="sort('closedate')" ng-class="{reverse: reverse}">
                        Closed
                    </th>
                </tr>
             </thead> 
        </table>
        </div>
        <div class="tablebody">
            <table class="table-striped table-condensed table-bordered grid">
                <tbody init-table>
                </tbody>
            </table>
        </div>
    </div>
    <divider></divider>
      <div class="msg" layout-align="center">
        <span ng-bind-html="msg">{{msg}}</span>
      </div>
</div>

directive('initTable', function(){
    return {
        restrict: 'A',
        //transclude: true,
        templateUrl: '/app/tool/action/ActionItemTable.html',
        controller: function($scope, $timeout) {
            $scope.scrollBarWidth = function(){
                    var outer = document.createElement("div");
                    outer.style.visibility = "hidden";
                    outer.style.width = "100px";
                    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

                    document.body.appendChild(outer);

                    var widthNoScroll = outer.offsetWidth;
                    // force scrollbars
                    outer.style.overflow = "scroll";

                    // add innerdiv
                    var inner = document.createElement("div");
                    inner.style.width = "100%";  
                    outer.appendChild(inner);        

                    var widthWithScroll = inner.offsetWidth;

                    // remove divs
                    outer.parentNode.removeChild(outer);

                    return widthNoScroll - widthWithScroll;
            }
            $scope.setMarginsWidths = function(){
                $scope.flag = 0;
                refresh = 1;
                var msie = document.documentMode;
                if(refresh){ 
                    $timeout(refreshEvery,1);
                }

                function refreshEvery(){
                    if ($scope.flag == 0 || window.devicePixelRatio != $scope.devicePixelRatio)
                    {   
                        $scope.flag = 1;
                        $scope.devicePixelRatio = window.devicePixelRatio;
                        var headers = angular.element(document.querySelector('div.tableheader table.grid thead tr')).children();
                        var cells = angular.element(document.querySelector('div.tablebody table.grid tbody tr:nth-child(1)')).children();
                        angular.forEach(cells, function(cell, idx){
                            var cellwidth = cell.getBoundingClientRect().width;
                            headers[idx].width = cellwidth;
                        });
                    }

                    if (refresh && !msie)
                        $scope.refreshingPromise = $timeout(refreshEvery,1);
                    else{
                         $scope.isRefreshing = false;
                         $timeout.cancel($scope.refreshingPromise);
                    }

                    //angular.element(document.querySelector('html')).attr("style", "margin-right: " + 0*$scope.scrollBarWidth() + "px !important");
                    angular.element(document.querySelector('div.tableheader')).attr("style", "margin-right: " + $scope.scrollBarWidth() + "px !important");
                    angular.element(document.querySelector('div.tablebody')).attr("style", "margin-right " + $scope.scrollBarWidth() + "px !important");    
                }
            }
        },
        link: function (scope, element, attrs) {
            scope.init().then(function(){

            });
        }
    }
}).directive('ngRepeatDone', function(){
    return {
        restrict: 'A',
        controller: function($scope, $timeout){
            $scope.devicePixelRatio = window.devicePixelRatio;
            $scope.setMarginsWidths();
            var tablebody = document.querySelector('div.tablebody');
            var tableheader = document.querySelector('div.tableheader');
            angular.element(tablebody).on("scroll", function(elem, attrs){  //activate when #center scrolls  
                left = $scope.CommonService.offset(angular.element(document.querySelector("div.tablebody table.grid"))[0]).left; //save #center position to var left
                (angular.element(tableheader)[0]).scrollLeft = -1*left + $scope.scrollBarWidth();
            }); 
        }
    }
});

显示问题的视频捕获

<div class="container-fluid">
    <div ng-controller="ActionController" ng-app="Action">
       <init-action/>
        ActionItems
        <div class="tableheader">
        <table id="actionitems" class="table-striped table-condensed table-bordered sortable action grid"> <!--datatable="" dt-options="dtOptions"-->
             <thead>
                <tr>  
                    <th>
                        Edit
                    </th>
                    <th ng-click="sort('actionitemid')" ng-class="{reverse: reverse}">
                        ID                       
                    </th>
                    <th ng-click="sort('actionitemtitle')" ng-class="{reverse: reverse}">
                        Action Item Title 
                    </th>
                    <th ng-click="sort('status')" ng-class="{reverse: reverse}">
                        Status
                    </th>                         
                    <th ng-click="sort('critlevel')" ng-class="{reverse: reverse}">
                        Criticality
                    </th>
                    <th ng-click="sort('assignor')" ng-class="{reverse: reverse}">
                        Assignor
                    </th>
                    <th ng-click="sort('owner')" ng-class="{reverse: reverse}">
                        Owner
                    </th>
                    <th ng-click="sort('altowner')" ng-class="{reverse: reverse}">
                        Alt Owner
                    </th>
                    <th ng-click="sort('approver')" ng-class="{reverse: reverse}">
                        Approver
                    </th>
                    <th ng-click="sort('assigneddate')" ng-class="{reverse: reverse}">
                        Assigned Date
                    </th>
                    <th ng-click="sort('duedate')" ng-class="{reverse: reverse}">
                        Due Date
                    </th>
                    <th ng-click="sort('ecd')" ng-class="{reverse: reverse}">
                        ECD
                    </th>
                    <th ng-click="sort('completiondate')" ng-class="{reverse: reverse}">
                        Completed
                    </th>
                    <th ng-click="sort('closedate')" ng-class="{reverse: reverse}">
                        Closed
                    </th>
                </tr>
             </thead> 
        </table>
        </div>
        <div class="tablebody">
            <table class="table-striped table-condensed table-bordered grid">
                <tbody init-table>
                </tbody>
            </table>
        </div>
    </div>
    <divider></divider>
      <div class="msg" layout-align="center">
        <span ng-bind-html="msg">{{msg}}</span>
      </div>
</div>

directive('initTable', function(){
    return {
        restrict: 'A',
        //transclude: true,
        templateUrl: '/app/tool/action/ActionItemTable.html',
        controller: function($scope, $timeout) {
            $scope.scrollBarWidth = function(){
                    var outer = document.createElement("div");
                    outer.style.visibility = "hidden";
                    outer.style.width = "100px";
                    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

                    document.body.appendChild(outer);

                    var widthNoScroll = outer.offsetWidth;
                    // force scrollbars
                    outer.style.overflow = "scroll";

                    // add innerdiv
                    var inner = document.createElement("div");
                    inner.style.width = "100%";  
                    outer.appendChild(inner);        

                    var widthWithScroll = inner.offsetWidth;

                    // remove divs
                    outer.parentNode.removeChild(outer);

                    return widthNoScroll - widthWithScroll;
            }
            $scope.setMarginsWidths = function(){
                $scope.flag = 0;
                refresh = 1;
                var msie = document.documentMode;
                if(refresh){ 
                    $timeout(refreshEvery,1);
                }

                function refreshEvery(){
                    if ($scope.flag == 0 || window.devicePixelRatio != $scope.devicePixelRatio)
                    {   
                        $scope.flag = 1;
                        $scope.devicePixelRatio = window.devicePixelRatio;
                        var headers = angular.element(document.querySelector('div.tableheader table.grid thead tr')).children();
                        var cells = angular.element(document.querySelector('div.tablebody table.grid tbody tr:nth-child(1)')).children();
                        angular.forEach(cells, function(cell, idx){
                            var cellwidth = cell.getBoundingClientRect().width;
                            headers[idx].width = cellwidth;
                        });
                    }

                    if (refresh && !msie)
                        $scope.refreshingPromise = $timeout(refreshEvery,1);
                    else{
                         $scope.isRefreshing = false;
                         $timeout.cancel($scope.refreshingPromise);
                    }

                    //angular.element(document.querySelector('html')).attr("style", "margin-right: " + 0*$scope.scrollBarWidth() + "px !important");
                    angular.element(document.querySelector('div.tableheader')).attr("style", "margin-right: " + $scope.scrollBarWidth() + "px !important");
                    angular.element(document.querySelector('div.tablebody')).attr("style", "margin-right " + $scope.scrollBarWidth() + "px !important");    
                }
            }
        },
        link: function (scope, element, attrs) {
            scope.init().then(function(){

            });
        }
    }
}).directive('ngRepeatDone', function(){
    return {
        restrict: 'A',
        controller: function($scope, $timeout){
            $scope.devicePixelRatio = window.devicePixelRatio;
            $scope.setMarginsWidths();
            var tablebody = document.querySelector('div.tablebody');
            var tableheader = document.querySelector('div.tableheader');
            angular.element(tablebody).on("scroll", function(elem, attrs){  //activate when #center scrolls  
                left = $scope.CommonService.offset(angular.element(document.querySelector("div.tablebody table.grid"))[0]).left; //save #center position to var left
                (angular.element(tableheader)[0]).scrollLeft = -1*left + $scope.scrollBarWidth();
            }); 
        }
    }
});

---

我已经运行了您的代码，并重新解决了鼠标闪烁问题。在我看来，这可能是浏览器的行为

滚动条时，鼠标将在样式I和箭头之间切换

<>这是因为IE检测表中的内容，它会变成I.如果检测表中的空白部分，它将变成箭头。< /P> 关于表格滚动延迟大约5-6秒，我还没有看到

以下是我的跑步成绩：

---

很抱歉，由于遗漏了一些代码，我无法重新解释此问题。您能否提供可能导致问题的完整代码？或者你可以像这样在jsbin中做一个简单的演示。嗨，詹妮弗，非常感谢你的回复，你能指出你想发布什么吗？我也将发布表格模板。该页面包括您指令的元素initTable、ngRepeatDone。我有一个代码笔（IE版本仅为live view，其他浏览器可以查看代码），代码笔不将IE显示为受支持的浏览器请查看IE模式（显示的行为比我的机器快一点）我相信我已经在我的机器上隔离了这个问题。当我在表中单击时，在我实际运行的代码中，将焦点移到表中，然后开始滚动，也就是说，在我实际的应用程序中出现了这个问题。我将继续寻找解决办法。非常感谢。我将在我的应用程序中的某个地方查找单击事件，并找出如何停止该行为，希望是通过preventDefault。另外，要注意的是，该行为发生在我使用鼠标滚轮时，并在表中显示焦点。我看不出滚动条滚动方式有什么问题。很抱歉，我误解了你的意思。我现在很好奇你的页面的行为。你能给我一个gif截图来告诉我什么是奇怪的行为吗？您的意思是在滚动时标题行有延迟渲染吗？如果是这样，这里有一个有用的链接：在我的代码库中删除一个必要的依赖项（Webix UI）消除了这个问题。我还不确定它为什么会导致这个问题。另外，请参阅问题末尾对我的问题的编辑，谢谢！注意，我没有使用ui网格，我创建了自己的网格。