jquery - 让 IScroll 5 与 Fancybox 2 一起工作

Question

我正在做一个元素，我正在使用 ISroll 5 显示一些 html 代码(需要滚动)，这些代码放置在部分图像上。该元素的另一部分有一个按钮，单击该按钮会使用 Fancybox 2 显示上述图像/html 的幻灯片。

IScroll 在仅显示图像/html 时工作正常。但是，当我尝试在 Fancybox 中显示相同的图像/html 时——使用不同的 IScroll 实例和代码源——滚动条和滚动都丢失了。

在寻找解决方案时，我发现了一个帖子，建议在 Fancybox 显示后需要刷新 IScroll。给出的原因是因为 IScroll 需要获取最初用 display: none 开头的 Fancybox 不可用的容器大小。所以建议的修复如下:

$("#about-button").fancybox({
    onComplete: function () {
        my_iscroll.refresh();
    }
});

在较新版本的 IScroll 5 中，“onComplete”功能已被“afterLoad”取代。鉴于此，我尝试使用 afterLoad 而不是运气相同的事情。很久以后，在尝试了其他几种方式都没有成功之后，我决定发帖。

我创建了一个缩小版的元素来说明问题。从 HTML 开始:

<div id="slideshow_btn"><button id="gallery_btn">View as Slideshow</button></div>
    <div id="page_contents">    
        <div id="page_image_contents">
            <img class="page_image" src="images/page_items/page4.jpg" width="900" height="620" />
            <div id="page_overlay">
                <div id="page_scroll">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et aliquam lacus, ac venenatis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eleifend urna vel purus rhoncus sodales. In faucibus metus non massa viverra vehicula. Ut vel sapien eget nisi dapibus mollis. Aliquam congue felis at justo tristique dictum. Cras eros lectus, euismod eleifend pretium vel, commodo in ipsum. Nam lobortis metus ut placerat fermentum. Nulla non accumsan quam. Pellentesque ligula nibh, convallis et purus vitae, dictum iaculis justo. Sed dolor lacus, interdum vestibulum nisi ut, volutpat iaculis mi. Suspendisse id urna eu quam gravida sagittis. Proin sit amet libero malesuada, sollicitudin tellus eu, aliquam tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eleifend urna vel purus rhoncus sodales. In faucibus metus non massa viverra vehicula. Ut vel sapien eget nisi dapibus mollis. Aliquam congue felis at justo tristique dictum. Cras eros lectus, euismod eleifend pretium vel, commodo in ipsum.</p>
                    <p>&nbsp;</p>
                </div>
            </div>
<script type="text/javascript">

var pageScroll = new IScroll('#page_overlay', {
    scrollbars: true,
    mouseWheel: true,
    interactiveScrollbars: true,
    shrinkScrollbars: 'scale',
    hideScrollbar : false
});

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>
    </div>
</div>
<!-- ============================= Slide Section  =========================== -->
<div id="slide_contents">   
    <div id="slide_image_contents">
        <img class="page_image" src="images/page_items/page4.jpg" width="900" height="620" />
        <div id="slide_overlay">
            <div id="slide_scroll">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et aliquam lacus, ac venenatis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eleifend urna vel purus rhoncus sodales. In faucibus metus non massa viverra vehicula. Ut vel sapien eget nisi dapibus mollis. Aliquam congue felis at justo tristique dictum. Cras eros lectus, euismod eleifend pretium vel, commodo in ipsum. Nam lobortis metus ut placerat fermentum. Nulla non accumsan quam. Pellentesque ligula nibh, convallis et purus vitae, dictum iaculis justo. Sed dolor lacus, interdum vestibulum nisi ut, volutpat iaculis mi. Suspendisse id urna eu quam gravida sagittis. Proin sit amet libero malesuada, sollicitudin tellus eu, aliquam tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eleifend urna vel purus rhoncus sodales. In faucibus metus non massa viverra vehicula. Ut vel sapien eget nisi dapibus mollis. Aliquam congue felis at justo tristique dictum. Cras eros lectus, euismod eleifend pretium vel, commodo in ipsum.</p>
                <p>&nbsp;</p>
            </div>
        </div>
<script type="text/javascript">

var slideScroll = new IScroll('#slide_overlay', {
    scrollbars: true,
    mouseWheel: true,
    interactiveScrollbars: true,
    shrinkScrollbars: 'scale',
    hideScrollbar : false
});

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>
    </div>
</div>

CSS:

body {
    overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#slideshow_btn {
    margin: 10px 10px 6px 0;    
}
#page_contents { 
    width: 900px;   
    height: 620px;
}
#page_image_contents {
    position: absolute;
    top: 50px;
    left: 25px;
    border: thin black solid;
}
.page_image {
    position: relative;
    height: 100%;
    width: 900px;
}
#page_overlay {
    position: absolute;
    top: 92px;
    left: 670px;
    width: 230px;
    height: 528px;
    overflow: hidden;
}
#page_scroll {
    padding-right: 15px;
}

#slide_contents { 
    width: 900px;   
    height: 620px;
}
#slide_image_contents {
    display: none;
    position: relative;
}
#slide_overlay {
    position: absolute;
    top: 92px;
    left: 670px;
    width: 230px;
    height: 528px;
    overflow: hidden;
}
#slide_scroll {
    padding: 0 5px;
}

和 jQuery:

$(document).ready(function() {

    $("#gallery_btn").click(function() {

        sGetPage = "#slide_image_contents";
        sGetPageHtml = $(sGetPage).html();

        $.fancybox.open(sGetPageHtml, {
            helpers : {
                overlay : {
                    locked : true 
                }
            },
            autoCenter : false,
            margin : 15,
            padding : 0, 
            fitToView : false,
            autoSize : false,
            scrolling: 'no',
            scrollOutside : true,
            width : 900,
            height : 620,
            afterLoad: function () {
                setTimeout(function() {
                    slideScroll.refresh();
                }, 0);
            }
        }); 
    });

});

感谢任何愿意调查此事的人。

Answer 1

afterLoad: 和 .refresh() 在您的示例中都运行良好。问题是花哨的框脚本会生成重复的 ID，然后 iScroll 不知道要定位哪个元素。页面的 ID 必须始终是唯一的。

解决方案是改用类，并将整个 iscroll 代码移动到 fancybox 回调中，因为在调用 fancybox 之前我们想要定位的元素将不存在。例如:

$(document).ready(function() {

var pageScroll = new IScroll('#page_overlay', {
    scrollbars: true,
    mouseWheel: true,
    interactiveScrollbars: true,
    shrinkScrollbars: 'scale',
    hideScrollbar : false
});

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    $("#gallery_btn").click(function() {

        sGetPage = "#slide_image_contents";
        sGetPageHtml = $(sGetPage).html();

        $.fancybox.open(sGetPageHtml, {
            helpers : {
                overlay : {
                    locked : true 
                }
            },
            autoCenter : false,
            margin : 15,
            padding : 0, 
            fitToView : false,
            autoSize : false,
            scrolling: 'no',
            scrollOutside : true,
            width : 900,
            height : 620,
            afterShow : function () {
                var slideScroll = new IScroll('.fancybox-wrap .slide_overlay', {
                    scrollbars: true,
                    mouseWheel: true,
                    interactiveScrollbars: true,
                    shrinkScrollbars: 'scale',
                    hideScrollbar : false
                });
            }
        }); 
    });

});

请注意，我专门针对具有适当类的元素，该类位于 fancybox 容器('.fancybox-wrap .slide_overlay')内部。

Here 一个有效的 jsfiddle。