有固定頭的角度Js無限滾動

Question

我想爲具有固定頭的表執行無限滾動，並且第一列也需要固定。

我試圖用Angular JS Infinite滾動指令來實現相同的功能。我能夠實現無限滾動，但無法修復div內的標題和列。

我附上了一個鏈接到我的小提琴下面。

http://jsfiddle.net/jayasant1907/5yxa3xyg/

的Javascript：

var myApp = angular.module('myApp', [ 
    'infinite-scroll']) 
    .controller('MyCtrl', function ($scope) { 
    $scope.items = []; 
    for (i = 0; i < 5000; ++i) { 
     $scope.items.push({ 
      number: i 
     }); 
    } 
    $scope.barLimit = 100; 
    $scope.increaseLimit = function() { 
     $scope.barLimit += 50; 
     console.log('Increase Bar Limit', $scope.barLimit) 
    } 
}); 

/* ng-infinite-scroll - v1.2.0 - 2015-02-14 */ 
var mod; 

mod = angular.module('infinite-scroll', []); 

mod.value('THROTTLE_MILLISECONDS', null); 

mod.directive('infiniteScroll', [ 
    '$rootScope', '$window', '$interval', 'THROTTLE_MILLISECONDS', function ($rootScope, $window, $interval, THROTTLE_MILLISECONDS) { 
    return { 
     scope: { 
      infiniteScroll: '&', 
      infiniteScrollContainer: '=', 
      infiniteScrollDistance: '=', 
      infiniteScrollDisabled: '=', 
      infiniteScrollUseDocumentBottom: '=', 
      infiniteScrollListenForEvent: '@' 
     }, 
     link: function (scope, elem, attrs) { 
      var changeContainer, checkWhenEnabled, container, handleInfiniteScrollContainer, handleInfiniteScrollDisabled, handleInfiniteScrollDistance, handleInfiniteScrollUseDocumentBottom, handler, height, immediateCheck, offsetTop, pageYOffset, scrollDistance, scrollEnabled, throttle, unregisterEventListener, useDocumentBottom, windowElement; 
      windowElement = angular.element($window); 
      scrollDistance = null; 
      scrollEnabled = null; 
      checkWhenEnabled = null; 
      container = null; 
      immediateCheck = true; 
      useDocumentBottom = false; 
      unregisterEventListener = null; 
      height = function (elem) { 
       elem = elem[0] || elem; 
       if (isNaN(elem.offsetHeight)) { 
        return elem.document.documentElement.clientHeight; 
       } else { 
        return elem.offsetHeight; 
       } 
      }; 
      offsetTop = function (elem) { 
       if (!elem[0].getBoundingClientRect || elem.css('none')) { 
        return; 
       } 
       return elem[0].getBoundingClientRect().top + pageYOffset(elem); 
      }; 
      pageYOffset = function (elem) { 
       elem = elem[0] || elem; 
       if (isNaN(window.pageYOffset)) { 
        return elem.document.documentElement.scrollTop; 
       } else { 
        return elem.ownerDocument.defaultView.pageYOffset; 
       } 
      }; 
      handler = function() { 
       var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll; 
       if (container === windowElement) { 
        containerBottom = height(container) + pageYOffset(container[0].document.documentElement); 
        elementBottom = offsetTop(elem) + height(elem); 
       } else { 
        containerBottom = height(container); 
        containerTopOffset = 0; 
        if (offsetTop(container) !== void 0) { 
         containerTopOffset = offsetTop(container); 
        } 
        elementBottom = offsetTop(elem) - containerTopOffset + height(elem); 
       } 
       if (useDocumentBottom) { 
        elementBottom = height((elem[0].ownerDocument || elem[0].document).documentElement); 
       } 
       remaining = elementBottom - containerBottom; 
       shouldScroll = remaining <= height(container) * scrollDistance + 1; 
       if (shouldScroll) { 
        checkWhenEnabled = true; 
        if (scrollEnabled) { 
         if (scope.$$phase || $rootScope.$$phase) { 
          return scope.infiniteScroll(); 
         } else { 
          return scope.$apply(scope.infiniteScroll); 
         } 
        } 
       } else { 
        return checkWhenEnabled = false; 
       } 
      }; 
      throttle = function (func, wait) { 
       var later, previous, timeout; 
       timeout = null; 
       previous = 0; 
       later = function() { 
        var context; 
        previous = new Date().getTime(); 
        $interval.cancel(timeout); 
        timeout = null; 
        func.call(); 
        return context = null; 
       }; 
       return function() { 
        var now, remaining; 
        now = new Date().getTime(); 
        remaining = wait - (now - previous); 
        if (remaining <= 0) { 
         clearTimeout(timeout); 
         $interval.cancel(timeout); 
         timeout = null; 
         previous = now; 
         return func.call(); 
        } else { 
         if (!timeout) { 
          return timeout = $interval(later, remaining, 1); 
         } 
        } 
       }; 
      }; 
      if (THROTTLE_MILLISECONDS != null) { 
       handler = throttle(handler, THROTTLE_MILLISECONDS); 
      } 
      scope.$on('$destroy', function() { 
       container.unbind('scroll', handler); 
       if (unregisterEventListener != null) { 
        unregisterEventListener(); 
        return unregisterEventListener = null; 
       } 
      }); 
      handleInfiniteScrollDistance = function (v) { 
       return scrollDistance = parseFloat(v) || 0; 
      }; 
      scope.$watch('infiniteScrollDistance', handleInfiniteScrollDistance); 
      handleInfiniteScrollDistance(scope.infiniteScrollDistance); 
      handleInfiniteScrollDisabled = function (v) { 
       scrollEnabled = !v; 
       if (scrollEnabled && checkWhenEnabled) { 
        checkWhenEnabled = false; 
        return handler(); 
       } 
      }; 
      scope.$watch('infiniteScrollDisabled', handleInfiniteScrollDisabled); 
      handleInfiniteScrollDisabled(scope.infiniteScrollDisabled); 
      handleInfiniteScrollUseDocumentBottom = function (v) { 
       return useDocumentBottom = v; 
      }; 
      scope.$watch('infiniteScrollUseDocumentBottom', handleInfiniteScrollUseDocumentBottom); 
      handleInfiniteScrollUseDocumentBottom(scope.infiniteScrollUseDocumentBottom); 
      changeContainer = function (newContainer) { 
       if (container != null) { 
        container.unbind('scroll', handler); 
       } 
       container = newContainer; 
       if (newContainer != null) { 
        return container.bind('scroll', handler); 
       } 
      }; 
      changeContainer(windowElement); 
      if (scope.infiniteScrollListenForEvent) { 
       unregisterEventListener = $rootScope.$on(scope.infiniteScrollListenForEvent, handler); 
      } 
      handleInfiniteScrollContainer = function (newContainer) { 
       if ((newContainer == null) || newContainer.length === 0) { 
        return; 
       } 
       if (newContainer instanceof HTMLElement) { 
        newContainer = angular.element(newContainer); 
       } else if (typeof newContainer.append === 'function') { 
        newContainer = angular.element(newContainer[newContainer.length - 1]); 
       } else if (typeof newContainer === 'string') { 
        newContainer = angular.element(document.querySelector(newContainer)); 
       } 
       if (newContainer != null) { 
        return changeContainer(newContainer); 
       } else { 
        throw new Exception("invalid infinite-scroll-container attribute."); 
       } 
      }; 
      scope.$watch('infiniteScrollContainer', handleInfiniteScrollContainer); 
      handleInfiniteScrollContainer(scope.infiniteScrollContainer || []); 
      if (attrs.infiniteScrollParent != null) { 
       changeContainer(angular.element(elem.parent())); 
      } 
      if (attrs.infiniteScrollImmediateCheck != null) { 
       immediateCheck = scope.$eval(attrs.infiniteScrollImmediateCheck); 
      } 
      return $interval((function() { 
       if (immediateCheck) { 
        return handler(); 
       } 
      }), 0, 1); 
     } 
    }; 
}]); 

Answer 1

像這樣的事情？您需要在桌子周圍放置一個容器，以便爲每個桌子進行絕對定位。

.constrained { 
    height:300px; 
    width: 300px; 
    overflow-y:scroll; 
} 

.constrained thead { 
    position: absolute; 
    width: 300px; 
    top: 0; 
    left: 0; 
} 
th { 
    width: 100px; 
} 
td { 
    width: 100px; 
} 

http://jsfiddle.net/wxyhqf23/2/