Question

我正在开发一个项目，我正在使用ISroll 5来显示一些HTML代码（需要滚动），放在部分图像上。该项目的另一部分有一个按钮，点击时显示使用Fancybox 2上面描述的图像/ html的幻灯片放映。

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

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

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

＆＃34; onComplete＆＃34;功能已在更新版本的IScroll 5中替换为＆＃34; afterLoad＆＃34;。鉴于此，我尝试使用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
                });
            }
        }); 
    });

});

请注意，我专门使用 in fancybox容器中的正确类来定位元素（＆＃39; .fancybox-wrap .slide_overlay＆＃39;）。

Here 一个工作的jsfiddle。

让IScroll 5与Fancybox 2一起使用

1 个答案: