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

Question

我在过去两年左右从事网络开发。从来不需要和手机打交道。 最近我需要为 WordPress 开发一些响应式模板。 除了 table 之外，我设法让很多东西都能工作。

我对响应式表格解决方案的想法是将表格的内容放入具有溢出:自动的div中。类似于datatable fixed columns

过去几个小时我一直在研究这个问题，认为在手机浏览器上滚动与在计算机浏览器上滚动是一样的。然后我检查我的手机，看看它是否有效(gallaxy note/平板电脑 - 工作正常，iPhone 4 s/iPhone 5 - 不起作用)。 这是我工作的 fiddle jsfiddle

在我意识到普通的 jquery scroll() 不起作用之后，我开始阅读有关移动版 jquery 的内容，我发现了以下内容:

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

我试过了，但还是没有。

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

谢谢

Answer 1

我阅读了更多内容并尝试了不同的方法，但没有一个是稳定的或可以在多个不同的手机上工作。

我认为 scrollstart 不起作用的原因是它的工作方式与 .scroll() 不同。

.scroll() 事件会触发滚动的每一步，以便更好地指示正在发生的情况，而 scrollstart 仅在您开始滚动和 scrollstop 时触发一次 当你停止滚动时触发，它似乎在 iPhone 和 Android 设备上工作得很好。

但是，当使用开始/停止时，仍然存在您无法解释的间隙。 我想到了两个解决方案:

1. 在 scrollstart 处，我将启动一个尽可能快地运行的间隔，并将触发另一个事件或执行操作 - 在我的情况下，更新标题的左侧滚动并在 scrollstop 处 终止间隔。

2. 在 scrollstart 将文档绑定(bind)到 mousemove 并执行您喜欢的操作。在 scrollstop 取消绑定(bind) 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;
});

希望对遇到这个问题的人有所帮助。