Javascript 切换按钮时保持滚动位置

我正在开发一个angularJS应用程序，它有一个页面，我使用ng repeat显示大约30个项目。每个项目前面都有一个切换按钮（启用/禁用）。使用当前代码，我可以切换这些项目。但问题是，如果我向下滚动并切换（比如第25项），那么它会自动滚动到页面顶部。如果我现在向下滚动，我可以看到切换实际上发生了。
因此，现在的要求是确保在单击切换按钮后保留滚动位置

请看下面的代码，我有

HTML

<div id="eventTypes" class="panel-body">
    <div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
        <div class="row">
            <div class="col-md-9">{{item.itemName)}}</div>
            <div class="col-md-3">
                <input id="toggleEnabled" 
                       type="button" 
                       ng-class="{'btn-primary': item.enabled}" 
                       value="{{item.enabled ? 'enabled' : 'disabled'}}" 
                       ng-click="toggleEnabled(item)">
            </div>
        </div>
    </div>
    <div ng-if="spinner" class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
            </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>

(function () {
    'use strict';
    angular.module('myApp').controller('itemsController', function ($scope, itemsService) {
        var serviceError = function (errorMsg) {
            console.log(errorMsg);
            $scope.turnOffSpinner();
        };

        $scope.items = [];
        $scope.item = {};
        $scope.spinner = true;

        $scope.toggleEnabled = function (item) {
            $scope.turnOnSpinner();
            itemsService.toggleEnabled(item)
                .then(function () {
                    $scope.loaditems();
                });
        };

        $scope.loaditems = function () {
            itemsService.getitems().then(function (response) {
                $scope.items = response.data;
            }, serviceError);
            $scope.turnOffSpinner();
        };

        $scope.turnOnSpinner = function () {
            $scope.spinner = true;
        };

        $scope.turnOffSpinner = function () {
            $scope.spinner = false;
        };

        $scope.loaditems();
    });
}());

现在的工作原理是，单击“切换”按钮后，将启用微调器。同时，控制器将调用

itemService.toggleEnabled（）

方法，该方法对服务器进行ajax调用，以仅更改后端中项目的状态（启用为禁用，反之亦然）。成功更改状态并返回ajax调用时，将在控制器中调用

$scope.loadItems（）

方法。然后，该方法将执行另一个ajax调用来获取项目（现在具有已切换项目的更新状态）。微调器被禁用，然后数据显示在UI上。 完成所有这些操作后，页面将滚动到顶部。当我想切换列表中较低的项目时，这很烦人。 我希望当我单击相应项目的切换按钮时，页面显示在相同的位置，而不是向上滚动到顶部

---

我是AngularJS的新手，这方面的任何帮助都会非常有帮助。

看来是你的旋转器方案导致了你的问题：

...
<div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
...
<div ng-if="spinner" class="spinner">
...

之后：

<div ng-repeat="item in items" class="panel-body">
    <div class="row">
        <div class="col-md-9">{{item.itemName)}}</div>
        <div class="col-md-3">
            <input id="toggleEnabled" 
                   ng-disabled="spinner"
                   type="button" 
                   ng-class="{'btn-primary': item.enabled}" 
                   value="{{item.enabled ? 'enabled' : 'disabled'}}" 
                   ng-click="toggleEnabled(item)">
        </div>
    </div>
</div>

现在，您可以通过某种方式对其进行样式设置，以防止交互，而无需从DOM中删除所有这些项：

.you-cant-touch-this {
  pointer-events: none;
}

---

看起来您的微调器方案是导致您出现问题的原因：

...
<div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
...
<div ng-if="spinner" class="spinner">
...

之后：

<div ng-repeat="item in items" class="panel-body">
    <div class="row">
        <div class="col-md-9">{{item.itemName)}}</div>
        <div class="col-md-3">
            <input id="toggleEnabled" 
                   ng-disabled="spinner"
                   type="button" 
                   ng-class="{'btn-primary': item.enabled}" 
                   value="{{item.enabled ? 'enabled' : 'disabled'}}" 
                   ng-click="toggleEnabled(item)">
        </div>
    </div>
</div>

现在，您可以通过某种方式对其进行样式设置，以防止交互，而无需从DOM中删除所有这些项：

.you-cant-touch-this {
  pointer-events: none;
}

---

我想知道当您重新检索列表时，它是否会调用$scope.loadItems（..），如果它清除列表，缩短页面，导致页面缩短时向上滚动？我不这么认为。即使是这样，您认为我如何防止它向上滚动？我想知道，当您重新检索列表时，它是否调用$scope.loadItems（..），如果它清除了列表，缩短了页面，使其在页面较短时向上滚动？我不这么认为。即使是这样，你认为我怎样才能阻止它向上滚动呢？我试着使用第一种方法，但当我点击按钮时，什么也没有发生。该按钮似乎无法再单击。请删除

来自
ng disabled=“！spinner”
的
spinner
部分，看起来是这样的：
ng disabled=“spinner”
。我已经更新了我的答案，这解决了问题。非常感谢你。我想知道你是否可以给我一个更详细的解释，我以前的方法出了什么问题。我尝试使用第一种方法，但当我点击按钮时，什么也没有发生。该按钮似乎无法再单击。请删除
来自
ng disabled=“！spinner”
的
spinner
部分，看起来是这样的：
ng disabled=“spinner”
。我已经更新了我的答案，这解决了问题。非常感谢你。我想知道你是否能给我一个更详细的解释，说明我以前的方法出了什么问题。