javascript - 滚动到底部不起作用，但滚动到行的正上方（scrollHeight 未正确更新）

Question

我想要什么：只要通过ng-keypress点击“输入”添加新的引脚名称行，滚动条就会自动滚动到底部。

问题：栏可以自动滚动，但只会滚动到行的正上方，这意味着我仍然需要手动向下滚动才能看到新添加的行

我的想法：所以这scrollTop = scrollHeight - clientHeight;对我来说很有意义。我已经看到了一些关于这个使用的答案scrollTop = scrollHeight;，但我保留了我在这里的内容，因为在我手动滚动到底部之后，滚动条位于我想要的位置，我控制台记录了scrollTop,scrollHeight和clientHeight, 和他们遵循这个等式。但是当我在控制台记录这些属性时scrollTop = scrollHeight - clientHeight;，scrollHeight将减少 35 像素。这是由某些offsetHeight或错误的更新位置引起的scrollTop吗？

HTML

<input type="text" id="add-new-pin-name-text" placeholder="Add Terminal(Pin) Name" data-lift="LocAttr?locId=sc_addPinsName&attr=placeholder" ng-model="newPinName" ng-keypress="newPinNameKeyPress($event)" id="add-pin" maxlength="40">

打字稿

$scope.newPinNameKeyPress = function(e) {
    var pinNameListContainer = document.getElementById("listings-pins-container");
    if (e.keyCode === 13) {
        $scope.addNewPin();
        if (pinNameListContainer){
            pinNameListContainer.scrollTop = pinNameListContainer.scrollHeight - pinNameListContainer.clientHeight;
        }
    }
};

$scope.addNewPin = function() {
  var element = document.getElementById("add-new-pin-name-text");
  if(($scope.newPinName === "") || /\s/g.test($scope.newPinName)) {
      if(element){
        element.blur();
      }
      return $rootScope.$emit('GenericError', i18n.symc_empty_pin_name);

  } else {
      $rootScope.$emit('AddNewPin', [{pinName:$scope.newPinName, pinNumber:""}]); // if this part's logic is needed, please let me know
      // I've tried to put "pinNameListContainer.scrollTop = pinNameListContainer.scrollHeight - pinNameListContainer.clientHeight;" here as well and it did the same thing
      return $scope.newPinName = "";
  }
};

标签： javascripthtmlcssangularjstypescript