Question

根据此链接： up/down arrow key issue with typeahead control (angular bootstrap UI)

我在我的js中添加了这些行：

$("li[data-id^='1-']")

滚动时，我们会受到更多打扰，滚动不顺畅。在添加此代码之前，滚动是正常且平滑的。请有人帮帮我吗？

Answer 1

嗨，这里是另一个代码，仅用于键盘事件，以便在向上/向下按键时调整滚动高度你需要在angular ui

中的typeahead指令中为keyup添加一个函数

在angular ui js文件中搜索指令（＆＃39; typeahead＆＃39; ）在粘贴以下函数之前找到 fireRecalculating 函数

function makeSureVisible(){
            $timeout(function(){
                $el = popUpEl.find('.active');
                if($el.length>0)
                {
                    var elTop, elBottom, nodeScrollTop, nodeHeight;
                    elTop = $el.position().top;
                    console.log(elTop);
                    elBottom = elTop + $el.outerHeight(true);

                    nodeScrollTop = popUpEl.scrollTop();
                    nodeHeight = popUpEl.height() + parseInt(popUpEl.css("paddingTop"), 10) + parseInt(popUpEl.css("paddingBottom"), 10);
                    if (elTop < 0) {
                        popUpEl.scrollTop(nodeScrollTop + elTop);
                    } else if (nodeHeight < elBottom) {
                        popUpEl.scrollTop(nodeScrollTop + (elBottom - nodeHeight));
                    }  
                }
            });  
        }

现在找到附加的keyup功能。调用上面的函数

element.bind('keydown', function(evt) {
          //typeahead is open and an "interesting" key was pressed
          if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) {
            return;
          }

          // if there's nothing selected (i.e. focusFirst) and enter or tab is hit, clear the results
          if (scope.activeIdx === -1 && (evt.which === 9 || evt.which === 13)) {
            resetMatches();
            scope.$digest();
            return;
          }

          evt.preventDefault();

          if (evt.which === 40) {
            scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
            scope.$digest();
            makeSureVisible();

          } else if (evt.which === 38) {
            scope.activeIdx = (scope.activeIdx > 0 ? scope.activeIdx : scope.matches.length) - 1;
            scope.$digest();
            makeSureVisible();

          } else if (evt.which === 13 || evt.which === 9) {
            scope.$apply(function () {
              scope.select(scope.activeIdx);
            });

          } else if (evt.which === 27) {
            evt.stopPropagation();

            resetMatches();
            scope.$digest();
          }
        });

Answer 2

function makeSureVisible() {
    $timeout(function () {
        $el = popUpEl[0].querySelector('.active');
        if ($el) {
            var elTop, elBottom, nodeScrollTop, nodeHeight;
            elTop = $el.offsetTop;
            elBottom = elTop + $el.offsetHeight;

            nodeScrollTop = popUpEl[0].scrollTop;
            nodeHeight = popUpEl[0].offsetHeight - (parseInt(window.getComputedStyle(popUpEl[0], null).getPropertyValue('padding-top')) + parseInt(window.getComputedStyle(popUpEl[0], null).getPropertyValue('padding-bottom')));

            if (elTop < nodeScrollTop) {
                popUpEl[0].scrollTop = elTop;
            } else if (nodeHeight < elBottom) {
                popUpEl[0].scrollTop = nodeScrollTop + elBottom - nodeHeight;
            }
        }
    });
 }

截至2015年11月27日，我遇到了与最新版角度引导程序0.14.3相同的问题。

评论：

我将该函数放在element.bind（＆＃34; keydown＆＃34;）中，因为它没有在你建议的地方工作。（功能不在适当的范围内且未定义）

第一个＆＃34; if＆＃34;没有触发我，所以我改变了一点逻辑。当用户到达结尾时，下拉列表会在我的情况下正确滚动到顶部。
将其修改为适用于普通javascript。

感谢您的解决方案！

Answer 3

我之前使用“shouldFocus”指令解决了这个问题，但我不得不做出更多调整才能使其工作。也许这个版本适合你。

<?php
function decrypt($encrypted, $key) {
    $decrypted = mcrypt_decrypt(
        MCRYPT_RIJNDAEL_128,
        hex2bin($key),
        hex2bin($encrypted),
        MCRYPT_MODE_ECB);
    return unpad($decrypted);
}

function unpad($data) {
    $padSize    = ord(substr($data, -1));
    $padStr     = substr($data, strlen($data) - $padSize);
    $padCheck   = str_pad('', $padSize, chr($padSize));
    if( strcmp($padStr, $padCheck) === 0 ) {
        return substr($data, 0, $padSize*-1);
    } else {
        return $data;
    }
}

$key    = '57238004e784498bbc2f8bf984565090';
$data   = '269B3F5A2208C533AACB51243CFB9CFB';

var_dump(decrypt($data, $key));
// Output: string(2) "28"

以下是那些不知道在哪里添加指令的修改后的模板：

.directive('shouldFocus', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.shouldFocus, function (newVal, oldVal) {
                if (newVal && element.prop("class").indexOf("active")) {
                    var par = element.parent("ul");
                    var cellHeight = element.children().innerHeight();
                    var maxHeight = par.height();
                    var startIndex = Math.floor(maxHeight / cellHeight);

                    if (scope.$index > startIndex) {
                        var scroll = (scope.$index - startIndex) * cellHeight;
                        par.scrollTop(scroll);
                    }
                    if (scope.$index === 0) {
                        par.scrollTop(0);
                    }
                }
            });
        }
    }
})

Angular ui-bootstrap typeahead建议 - 滚动

3 个答案: