如何用JavaScript和AngularJS获取带垂直滚动条页面视口内元素ID

Getting the IDs of elements visible in the viewport boils down to checking each element's position relative to the window's visible area. Below are practical implementations using vanilla JavaScript and AngularJS tailored to your needs.

Pure JavaScript Solution #

This is a straightforward function you can call on scroll or whenever you need to check visibility:

function getVisibleElementIds() {
  const visibleIds = [];
  // Target all elements that have an ID attribute
  const elementsWithIds = document.querySelectorAll('[id]');
  
  // Calculate viewport boundaries
  const viewportTop = window.scrollY;
  const viewportBottom = viewportTop + window.innerHeight;

  elementsWithIds.forEach(element => {
    const rect = element.getBoundingClientRect();
    // Convert element's relative position to absolute (accounting for scroll)
    const elementTop = rect.top + viewportTop;
    const elementBottom = elementTop + rect.height;

    // Check if element overlaps with the viewport (partial or full visibility)
    if (elementBottom > viewportTop && elementTop < viewportBottom) {
      visibleIds.push(element.id);
    }
  });

  return visibleIds;
}

// Example: Run on scroll and log results
window.addEventListener('scroll', () => {
  const visibleIds = getVisibleElementIds();
  console.log('Visible elements:', visibleIds);
});

// Initial check when page loads
console.log('Initial visible elements:', getVisibleElementIds());

Key Notes: #

• To only count fully visible elements, adjust the condition to:
  elementTop >= viewportTop && elementBottom <= viewportBottom
• For better performance (since scroll events fire frequently), add a throttle/debounce to limit how often the function runs.

AngularJS Implementation #

Since AngularJS relies on scoped logic and reusable components, here are two common approaches:

Option 1: Reusable Visibility Service #

Wrap the visibility check in a service to use across controllers:

angular.module('yourAppName', [])
  .service('viewportService', function() {
    this.getVisibleElementIds = function() {
      const visibleIds = [];
      const elements = document.querySelectorAll('[id]');
      const viewportTop = window.scrollY;
      const viewportBottom = viewportTop + window.innerHeight;

      angular.forEach(elements, element => {
        const rect = element.getBoundingClientRect();
        const elementTop = rect.top + viewportTop;
        const elementBottom = elementTop + rect.height;

        if (elementBottom > viewportTop && elementTop < viewportBottom) {
          visibleIds.push(element.id);
        }
      });

      return visibleIds;
    };
  })
  .controller('mainController', function($scope, viewportService, $window) {
    $scope.visibleElementIds = [];

    // Update visible IDs on scroll
    angular.element($window).on('scroll', () => {
      $scope.$apply(() => {
        $scope.visibleElementIds = viewportService.getVisibleElementIds();
      });
    });

    // Initial check on controller load
    $scope.visibleElementIds = viewportService.getVisibleElementIds();
  });

Option 2: Directive for Per-Element Tracking #

If you need to track visibility for individual elements (e.g., update UI when an element enters the viewport), use a directive:

angular.module('yourAppName')
  .directive('trackVisibility', function($window) {
    return {
      scope: {
        isVisible: '='
      },
      link: function(scope, element) {
        const checkVisibility = () => {
          const rect = element[0].getBoundingClientRect();
          const viewportTop = $window.scrollY;
          const viewportBottom = viewportTop + $window.innerHeight;
          const elementTop = rect.top + viewportTop;
          const elementBottom = elementTop + rect.height;

          scope.$apply(() => {
            scope.isVisible = elementBottom > viewportTop && elementTop < viewportBottom;
          });
        };

        // Listen to scroll and resize events
        angular.element($window).on('scroll resize', checkVisibility);
        
        // Initial visibility check
        checkVisibility();

        // Cleanup event listeners when directive is destroyed
        scope.$on('$destroy', () => {
          angular.element($window).off('scroll resize', checkVisibility);
        });
      }
    };
  });

Usage in HTML:

<div id="hero-section" track-visibility is-visible="heroVisible">...</div>
<div id="feature-section" track-visibility is-visible="featureVisible">...</div>

<!-- Display visible IDs in your template -->
<div ng-if="heroVisible">{{ 'hero-section' }} is visible!</div>
<div ng-if="featureVisible">{{ 'feature-section' }} is visible!</div>

内容的提问来源于stack exchange，提问作者swamykumar