在 jQuery 移动设备中使 div 键盘可滚动？

Question

据我所知，虽然 jQuery- 移动页面可以包含 divs 并且溢出设置为滚动或自动，并且这些 divs 可以滚动单屏栏或鼠标滚轮，它们不能使用箭头键、page-up/page-down 或 home/end.

滚动

相反，官方 "page" div（数据角色="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>s 不能使用键盘滚动。我对这个限制的处理方法很简单：

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

因此，鼠标位置设置了必须滚动的元素。

已更新 JSFiddle（单击以在滚动前聚焦 "run" 象限）

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

在使用新搜索重新访问它时（"focus" 是比 "scroll" 更好的关键字），我发现了一个更更简单的解决方案。

只需给有问题的 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 移动设备中使 div 键盘可滚动？

Make div keyboard-scrollable in jQuery Mobile?

css

scroll

focus

overflow

jquery-mobile