使用 AngularJS 滚动到选择选项（焦点不适用于 Chrome、IE11）答案

【问题标题】：Scroll to a select option using AngularJS (focus not working on Chrome, IE11)使用 AngularJS 滚动到选择选项（焦点不适用于 Chrome、IE11）
【发布时间】：2018-08-21 20:57:03
【问题描述】：

在用户向上或向下移动一个选择选项并且该选项移过视口后，我需要滚动到该选项。请注意，此问题仅在 Chrome 和 IE11 上观察到。它在 Firefox 上运行良好。

我尝试在元素上使用 focus() 或 click()，但是，这在 Chrome 中不起作用。请注意，在 FireFox 中未发现此问题。

这是 HTML：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>AngularJS Select</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

        <script src="script.js"></script>
    </head>
    <body ng-app="demo">
        <h1>AngularJS Select focus</h1>
        <div ng-controller="mainCtrl">
            <div class="col-md-5 col-sm-5">
                <div class="row">
                    <select class="form-control" style="min-height: 200px;"
                            id="Items"
                            multiple ng-multiple="true"
                            ng-model="captureRemoved"
                            ng-options="item.Title for item in selectedItems"
                            ng-value="item">
                    </select>
                </div>
            </div>
            <div class="col-md-1 col-sm-1" style="padding-right: 5px; padding-left: 5px;">
                <div style="padding-top: 36.5px;">
                    <div class="pull-center">
                        <a type="button" ng-click="moveDown()"><span><i class="fa fa-chevron-circle-down fa-lg" style="padding-left:8px">Down</i></span></a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Javascript：

var app = angular.module('demo', []);


app.controller("mainCtrl", function ($scope) {
    $scope.selectedItems = [];//new Array();
    $scope.captureRemoved = [];
    $scope.item = "";

    $scope.load = function () {

        for (var i = 0; i < 30; i++) {
            var lbl = "item" + i;
            var item = {Id: i, Title: lbl};
            $scope.selectedItems.push(item);
        }

        $scope.selectedItem = 29;
        var x = 0;

    };

    $scope.load();

    $scope.moveDown = function () {
            var Id = 0;
            var origin = 0;
            var destination = 0;

            if ($scope.captureRemoved.length == 1) {
                Id = $scope.captureRemoved[0].Id;
            }

            for (var i = 0; i < $scope.selectedItems.length; i++) {
                if ($scope.selectedItems[i].Id == Id) {
                    origin = i;
                    destination = i + 1; // increment position or move down
                    break;
                }
            }

            if (destination >= 0 && destination < $scope.selectedItems.length && $scope.selectedItems[destination] != null) {
                var temp = $scope.selectedItems[destination];
                $scope.selectedItems[destination] = $scope.selectedItems[origin];
                $scope.selectedItems[origin] = temp;

                var m = document.getElementById('Items').options[destination];
               //m.click(); //does not work
                m.focus(); //does not work
            }

    };
});

我还需要将焦点设置在元素上，以防它滚动到视口之外。例如选择第 9 项并单击“向下”按钮两次。现在无法查看第 9 项。

有人可以帮忙吗？

【问题讨论】：

就像众所周知的大海捞针，你让人们很难在你的代码中找到错误。您真正的问题仅在于一些说明，并且发布的大多数代码与您的问题的解决完全无关。见How to create a Minimal, Complete, and Verifiable example。
对不起 - 没有意识到 - 当我发布时 - 我已经从另一个代码库中提取了代码。进一步缩短了它。希望这有效。顺便说一句 - 我尝试了几种方法来解决这个问题 -scrollIntoView, anchorScroll and scrollTop。这些都不起作用。

标签： javascript html angularjs focus angularjs-ng-options

【解决方案1】：

要滚动<select> 元素的内容，请设置该元素的scrollTop 属性：

if (destination >= 0 && destination < $scope.selectedItems.length && $scope.selectedItems[destination] != null) {
    var temp = $scope.selectedItems[destination];
    $scope.selectedItems[destination] = $scope.selectedItems[origin];
    $scope.selectedItems[origin] = temp;

    var m = document.getElementById('Items').options[destination];
    //m.click(); //does not work
    //m.focus(); //does not work

    $timeout(function() {
      var p = m.parentElement;
      //GET offsetTop of <option> element
      var x = m.offsetTop;
      //SET scrollTop of <select> element
      p.scrollTop = x-100;
    })
}

上面的例子使用了<option>元素的offsetTop属性，并设置了父<select>元素的scrollTop属性。它将<option> 元素放置在滚动窗口顶部下方100 像素处。

DEMO on PLNKR

【讨论】：

谢谢！在对这个问题进行试验时，还找到了另一种解决方案——但是，我认为@georgeawg 的解决方案更好。这是我的解决方案：
向选项添加了 ID，并修改了 JavaScript 以包括 scrollToTop 和 scrollIntoView。 DEMO on PLNKR