使用 AngularJS 滚动到 select 选项（焦点不适用于 Chrome，IE11）

Question

我需要在用户向上或向下移动并且选项移过视口后滚动到 select 选项。请注意，此问题仅在 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
            }

    };
});

我还需要将焦点设置在元素上，以防它滚过视口。例如Select 项目 9 并单击 "Down" 按钮两次。现在无法查看第9项。

有人可以帮忙吗？

Answer 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 像素处 window。

DEMO on PLNKR

使用 AngularJS 滚动到 select 选项（焦点不适用于 Chrome，IE11）

Scroll to a select option using AngularJS (focus not working on Chrome, IE11)

html

javascript

focus

angularjs

angularjs-ng-options