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

Question

据我所知，虽然 jQuery-Mobile 支持的页面可以包含溢出设置为滚动或自动的 div，并且可以使用单屏栏或鼠标滚轮滚动这些 div，但不能使用箭头键、向上翻页/向下翻页或主页/结尾。

相反，官方“页面”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>无法使用键盘滚动 s。我解决这个限制的方法很简单:

• 为向上/向下/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();
    });
});