Question

过去2年左右我在网络开发中。从来没有处理移动。最近我需要为wordpress开发一些响应式模板。除了桌子，我设法得到了很多东西。

我对响应式表解决方案的想法是将表的内容放在具有overflow：auto的div中。类似于datatable fixed columns

在过去的几个小时里，我一直在努力思考在手机浏览器上滚动与计算机浏览器相同。然后，我检查我的手机，看它是否有效（gallaxy注意/平板电脑 - 工作正常，iphone 4 s / iphone 5 - 没有工作）。这是我在 jsfiddle

上工作的小提琴

在我意识到正常的jquery scroll()无法工作之后我开始阅读有关jquery for mobile的内容我发现了以下内容：

element.on("scrollstart",function(){
    console.log("happening");
});

我试过了，但仍然没有。

我的问题是我如何处理移动浏览器上的滚动？一般来说，我应该如何开发手机？指南？文章？

由于

Answer 1

我已经阅读了更多内容并尝试了不同的东西，但这些东西都不稳定，或者在几种不同的手机上工作。

我之所以认为scrollstart无效，是因为它的工作方式与.scroll()不同。

.scroll()事件会触发滚动的每一步，更好地指示正在进行的操作，而当您开始滚动时scrollstart仅触发一次，而当您停止滚动时scrollstop触发在iphone和Android设备上运行得很好。

然而，当使用开始/停止时，仍然存在您无法解释的差距。我想到了两个解决方案：

在scrollstart我将开始一个尽可能快的间隔运行并将触发另一个事件或执行一个动作 - 在我的情况下更新标题的左侧滚动并在scrollstop处杀死间隔。
在scrollstart将文档绑定到mousemove并执行您喜欢的操作。在scrollstop unbind mousemove。

我认为1号应该更可靠地运行，但是会更重/需要更多资源。

var interval = "";
$('.element').on("scrollstart",function(){
    if(!interval){
        interval = setInterval(function(){
            //* fires event
            console.log($('.element').scrollLeft());
        }, 0);
    }
}).on("scrollstop",function(){
    console.log($('.element').scrollLeft());
    clearInterval(interval);
    interval = false;
});

希望能帮助那些遇到这个问题的人。

如何为移动设备制作可滚动的div或表？

1 个答案: