무한 스크롤로 지연로드시 스크롤 위치 고정 (스크롤 업)

내 응용 프로그램에 대화/WhatsApp 기능이 있습니다. 최신 메시지는 맨 아래에 있으며 가장 오래된 메시지는 맨 위에 있습니다.무한 스크롤로 지연로드시 스크롤 위치 고정 (스크롤 업)

메시지 상단 근처에서 스크롤하면 자동으로 더 많이로드되지만 스크롤 위치는 그대로 유지하려고합니다. 나는 이것을하는 지침을 만들었지 만, 문제는 그것이 깜박이다. 새로운 메시지가로드되고 스크롤 위치가 맨 위로 다시 설정됩니다. 그런 다음 내 지시문이 들어 와서 스크롤 위치를 원래 위치로 재설정합니다. 그래서 효과가 있지만 멋지지 않습니다.

누구에게이 문제를 해결할 수있는 단서가 있습니까?

HTML :

<div class="conversation-scroll-container" scroll-lock="{{ vm.isLoading }}">

VM (로드 메시지 기능) :

return this.messageService 
    .getMessages(conversation, dates) 
    .then(data => { 
     this.selectedConversation.applyNewMessages(data); 

     return data; 
    }) 
    .finally(() => { 
      this.isLoading = false; 
    });

그리고 마지막으로 지시자 (그것의 TS에서) :

export class ScrollLockDirective implements angular.IDirective { 
    public restrict = "A"; 
    private scrollLock = false; 
    private scrollLockOffset = 0; 

    constructor(private $timeout: angular.ITimeoutService) { } 

    static factory(): ng.IDirectiveFactory { 
     const directive = ($timeout: angular.ITimeoutService) => new ScrollLockDirective($timeout); 

     directive.$inject = ["$timeout"]; 

     return directive; 
    } 

    public link = (scope: angular.IScope, element: angular.IAugmentedJQuery, attributes: angular.IAttributes) => { 

     attributes.$observe("scrollLock",() => { 

      if (attributes["scrollLock"] === "true") { 
       this.scrollLock = true; 
      } 
      else { 
       this.doLockScroll(element); 
       this.scrollLock = false; 
      } 
     }); 

     element.bind("scroll",() => { 
      this.doLockScroll(element); 
     }); 

     scope.$on("$destroy",() => { 
      element.unbind("scroll"); 
     }); 
    } 

    private doLockScroll(element: angular.IAugmentedJQuery) { 

     if (this.scrollLock) { 
      this.$timeout(() => { 
       element.scrollTop(element[0].scrollHeight - this.scrollLockOffset); 
      }); 
     } else { 
      this.scrollLockOffset = element[0].scrollHeight - element.scrollTop(); 
     } 
    } 
}

출처

2016-06-23 Chris

위의 요소를 추가 할 때도 동일한 깜박임 문제가 있지만 스크롤 위치를 유지하려고합니다. 주요 문제는 우리가 조정할 필요가있는 높이를 알기 전에 DOM에 각도 렌더링을해야한다는 것입니다. 아직 해결책을 찾았습니까? –

내가 같은 문제가 있었다 당신과 나 또한 scrollTop 위치 등을 설정하려고했지만 솔루션은 매우 간단합니다. 단지 새 항목 만 렌더링하면됩니다. 모든 항목을 렌더링합니다.

출처

2017-07-25 11:31:36 rimlin

무한 스크롤로 지연로드시 스크롤 위치 고정 (스크롤 업)

답변

관련 문제