javascript - jQuery Accordion 在移动滚动上崩溃

Question

我正在使用this accordion-style plugin来扩展和折叠网格的每一行下的内容，例如google图片。

一切在我的计算机上都可以正常运行，但是当您在iOS设备上查看此内容时，滚动内容会折叠。如果在iOS设备上进行检查，则可以在上面的链接中看到问题。 (该问题可能也存在于Android中，但我无权访问该设备。)

滚动问题是由以下调整大小功能引起的:

    // adjust colio viewport height on window resize
    $(window).bind('resize orientationchange', function(e){

        // stop propagation if colio is event target
        if(e.target === self.markup.get(0)) {
            e.stopImmediatePropagation();
        }

        // for 'inside' placement hide viewport immediately on resize
        if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
            self.insideHideViewport();
        }

        // disable page scroll during window resize
        if(!self.temp) {
            self.temp = [self.settings.syncScroll, self.settings.scrollPage];
        }
        self.settings.syncScroll = true;
        self.settings.scrollPage = false;

        // adjust viewport height
        clearTimeout(self.resize_timer);
        self.resize_timer = setTimeout(function(){
            self.expandViewport(self.active_id, true);
            self.settings.syncScroll = self.temp[0];
            self.settings.scrollPage = self.temp[1];
            delete self.temp;
        }, 200);

    });

更具体地说，问题似乎仅在于此行:

// for 'inside' placement hide viewport immediately on resize
            if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
                self.insideHideViewport();
            }

如果仅删除该部分，它将对其进行修复。但是问题是，我使用的是“内部”放置，因此当您调整浏览器大小或更改设备方向时，此代码对于隐藏扩展的div是必需的。否则，由于高度计算已关闭，因此看起来很奇怪。

似乎正在将移动滚动视为窗口调整大小。

您是否能找到一种方法来修改此代码，以保持调整大小隐藏功能，同时解决在移动设备上滚动时引起的问题？

Answer 1

问题是iOS滚动触发了resize事件。我在这里找到了解决方案:iphone/ipad triggering unexpected resize events

我检查了令人讨厌的代码行，以检查屏幕的实际宽度是否已更改。这是我的修改代码:

     // Store the window width
    var windowWidth = $(window).width();

    // adjust colio viewport height on window resize
    $(window).bind('resize orientationchange', function(e){

        // stop propagation if colio is event target
        if(e.target === self.markup.get(0)) {
            e.stopImmediatePropagation();
        }

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
    if ($(window).width() != windowWidth) {

        // Update the window width for next time
        windowWidth = $(window).width();

        // for 'inside' placement hide viewport immediately on resize
        if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {
            self.insideHideViewport();

        }

    }
        // disable page scroll during window resize
        if(!self.temp) {
            self.temp = [self.settings.syncScroll, self.settings.scrollPage];
        }
        self.settings.syncScroll = true;
        self.settings.scrollPage = false;

        // adjust viewport height
        clearTimeout(self.resize_timer);
        self.resize_timer = setTimeout(function(){
            self.expandViewport(self.active_id, true);
            self.settings.syncScroll = self.temp[0];
            self.settings.scrollPage = self.temp[1];
            delete self.temp;
        }, 200);

    });