Question

据我所知，虽然jQuery-Mobile驱动的页面可以包含溢出设置为滚动或自动的div，并且这些div可以使用单屏幕栏或鼠标滚轮滚动，但它们无法使用箭头键，页面向上/向下翻页或家庭/结束。

相反，官方的“page”div（data-role =“page”）吸收了所有这些输入。也许其他div甚至无法获得焦点，我不确定。

有什么方法吗？

编辑：简单例子的JSfiddle：https://jsfiddle.net/qogz0shx/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js">
</script>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>

<style>
    #outer {
        overflow:scroll;
        height: 50vh;
        width: 50vw;
    }

    #inner {
        height: 500vh;
        width: 500vw;
    }
</style>

<div data-role="page">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>

没有外部文件的相同示例：https://jsfiddle.net/xr0hjjjc/

<style>
    #outer {
        overflow:scroll;
        height: 50vh;
        width: 50vw;
    }

    #inner {
        height: 500vh;
        width: 500vw;
    }
</style>

<div data-role="page">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>

在Chrome中，如果您在第二个示例中单击div并按箭头键，则应看到滚动条移动。如果你对第一个做同样的事情，他们就不会这样做。

Answer 1

你是对的，内部<div>无法使用键盘滚动。我对此限制的处理方法很简单：

为up / down / PageUp / PageDown键创建新的处理程序
按下这些键时，获取鼠标下的元素
如果元素包含keyboardScroll类，则相应地滚动

因此，鼠标位置设置必须滚动哪个元素。

更新JSFiddle （点击以在滚动前关注“运行”象限）

<强>的JavaScript

var currentMousePos = { x: -1, y: -1 };

$(document).on("pageinit", "#page", function(event)
{
    $(document).mousemove(function(event)
    {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

    // keyboard handler
    $(document).on("keydown", function(e)
    {
        // get element under mouse
        var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y);

        // search for scrollable element in parents
        while (!$(element).hasClass("keyboardScroll") && $(element).parents().length !== 0)
            element = element.parentElement;

        if (!$(element).hasClass("keyboardScroll"))
            return; // no scrollable element found

        // set scroll "speed"
        var delta = 10;

        if (e.keyCode === 38) // up
            delta *= -1;
        else if (e.keyCode === 40) // down
            delta *= 1;
        else if (e.keyCode === 33) // pageup
            delta *= -10;
        else if (e.keyCode === 34) // pagedown
            delta *= 10;
        else
            return;

        // scroll element
        $(element).scrollTop($(element).scrollTop() + delta);

        // stop event from propagating to jQuery Mobile handlers
        e.preventDefault();
        e.stopPropagation();
    });
});

Answer 2

在使用新搜索重新访问此搜索时（“焦点”是一个比“滚动”更好的关键字），我发现了一个很多更简单的解决方案。

只需给有问题的div一个tabindex属性，使其具有焦点。将值设为-1，这样就不会干扰其他任何内容的tabindex。（这意味着如果用户一直按Tab键，则所讨论的div将永远不会被聚焦。如果您希望它可以通过这种方式聚焦，请将索引更改为正数。）

<div id="outer" tabindex="-1"> </div>
<!-- Containing element with overflow:scroll or whatever -->

就是这样。单击div后，它应该覆盖jQuery Mobile禁止焦点的任何操作。新JSFiddle here。

在jQuery Mobile中使div键盘可滚动？

2 个答案: