2013-08-13 4 views
0

브라우저 창의 오른쪽에 고정 된 div가 있습니다. div 안에는 ng-repeat로 전파되는 div 요소를 보유하는 컨테이너가 있습니다. 이 div 요소에 포함 된 데이터는 HTML 요청에 대한 응답의 메시지입니다. 어떤 이유로 div 요소가 전파되면이 컨테이너를 컨테이너의 맨 아래로 스크롤 할 수 없습니다. 내가 $ anchorScroll $ 위치를 사용하여 노력하고, 나는 그것을 수동으로 일반 자바 스크립트 getElementByID하고 노력했다. 요청이 비동기 적으로 발생하는 것을 알고 약속 및 제한 시간을 사용하여 시도했지만 어떤 이유로이 div를 자동으로 스크롤 할 수 없습니다.Angular.js를 사용하여 div 요소의 맨 아래로 스크롤 할 수 없습니다.

다음은 모든 관련 코드입니다. 누군가가 올바른 방향으로 나를 가리킬 수 있다면 나는 많은 도움이 될 것입니다! 여기

.messages-container { 
    margin-bottom: 100px; 
    width: 700px; 
    height: 600px; 
    overflow-y: scroll; 
    display: block; 

내 컨트롤러 : 여기
ul.dropdown-menu 
    li(ng-repeat="group in groups") 
    a(ng-click="loadGroup(group.id)") {{group.name}} 


div(class='messages-container') 
    .message-box(ng-repeat="message in messageIndex.messages| orderBy:'created_at'") 

내 CSS입니다 : 여기

내 옥입니다

app.factory('MyMessageLoad', function($http, $templateCache) { 

    var MessageLoad = function() { 
    this.messages = []; 
    this.beforeID = ''; 
    }; 

    MessageLoad.prototype.nextPage = function($groupID) { 

    var urlString = 'https://api.groupme.com/v3/groups/' + $groupID + '/messages?'+ this.beforeID; 
    $http({method: 'GET', url: urlString}).success(function(data) { 
     var messages = data.response.messages; 
     for (var i = 0; i < messages.length; i++) { 
      this.messages.push(messages[i]); 
     } 
     this.beforeID = "&before_id=" + this.messages[this.messages.length - 1].id; 
    }.bind(this)); 
    }; 

return MessageLoad; 
,691 : 여기
app.controller('GroupMeCtrl', 
    ['$scope', '$http', '$templateCache', '$location', 'Auth', 'MyMessageLoad', 
    function($scope, $http, $templateCache, Auth, MyMessageLoad) { 

    $scope.loadGroup = function($groupID){ 
     $scope.messageIndex = new MyMessageLoad(); 
     $scope.messageIndex.nextPage($groupID); 
    }; 
}]); 

내 공장

}); 이를 사용해보십시오 - 자신과 함께 출시보다 오히려

sidebarwidth = $(".sidebar-width").css('width'); 
bodypaddingtop = $(".navbar-fixed-top").css('height'); 
sidebarheight = $("body").css('height'); 
$('.sidebar-nav-fixed').css('width', sidebarwidth); 
$('.sidebar-nav-fixed').css('height', sidebarheight); 
$('body').css('paddingTop', bodypaddingtop); 
contentmargin = parseInt(sidebarwidth); 
$('.span-fixed-sidebar').css('marginLeft', contentmargin); 
$('.span-fixed-sidebar').css('paddingLeft', 60); 

답변

2

을 :

그리고 여기 간섭이 중요한 뭔가가있는 단지의 경우, 브라우저 창의 오른쪽에 사업부를 해결 자바 스크립트입니다 구성 요소 :

https://github.com/Luegg/angularjs-scroll-glue

무료 보너스 "찰기"- 당신은 항상 마지막으로 스크롤하여 스크롤을 터치하지 않는 경우,하지만 당신은 사용자 정의 항목으로 스크롤 할 경우이 남아 있습니다 ,보다는 scrol 새 항목이 추가되면 맨 아래로 향합니다.

관련 문제