- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在做一个元素,我正在使用 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> </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> </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);
}
});
});
});
感谢任何愿意调查此事的人。
最佳答案
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。
关于jquery - 让 IScroll 5 与 Fancybox 2 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24102696/
我有 2 个列表,我使用 iScroll 进行垂直滚动。 第二个列表在第一个列表中。 当我滚动第二个列表时,第一个列表也在滚动。 我希望当我滚动内部列表(第二个列表)时,主列表(第一个列表)不会滚动。
我在垂直内实现 Carousel 时遇到了问题我滚动。由于 Carousel 是水平滚动的,而 iScroll 是垂直滚动,它会导致故障,因为 Carousel 滚动垂直,即使我禁用它。 我尝试将两个
我有一个带有 IScroll 的 div 在另一个带有 IScroll 的 div 中。每当我尝试在子 div 上滚动时,父级也会滚动,所以这是一种糟糕的用户体验。 我不想获取每个变量并告诉它暂时禁用
我在 android phonegap 中创建了应用程序。我使用 iscoll 在 div 中动态显示滚动条,因为我附加了列表并动态显示。 它显示带有附加列表的div,但不显示滚动条。 在 logca
我创建了一个页面,该页面对页眉和页脚使用固定定位,并且还必须在 iPad/iPhone 上工作。我正在使用 iScroll.js (http://cubiq.org/iscroll-4) 在 iPad
我已经阅读了很多关于此的论坛,但没有一个解决了我的问题。我确定它是我遗漏的小东西 这是 iscroll 初始化: // make PI scroll piScroll2 = new iScroll('
我有一个带有交互式滚动条的水平 iScroll 实例。 myScroll = new IScroll('#wrapper', { scrollX: true,
我正在尝试使用 IScroll 库中的scrollToElement 函数,但无法让它工作。 new IScroll(document.querySelector(".wrapper")).scrol
我正在尝试使用 iscroll 插件 ( https://github.com/cubiq/iscroll ) 为 div 添加滚动功能。我发现它使滚动父项内的链接不可单击。禁用该插件可以修复它。 起
我正在 iOS 和 Android 上的 Phonegap 上开发一个演示,我选择 iScroll 来使页面可滚动,它工作正常,但我必须在创建 DOM 元素后生成 iScroll,因此 iScroll
有谁知道怎么做iScroll像旋转木马一样,有没有办法制作 iScroll自动在“ul”内循环? 因为我想在 iOS 上使用它,所以我一直在想办法.. 非常感谢您抽出时间。 最佳答案 以下内容应该有效
iPad 上 Mobile Safari 中的 HTML5 模板。带 iScroll 的 Div 工作正常。 if/else 语句中还包含一个 jQuery 函数。该函数测试用户是否在 iScroll
如果您输入http://gizeto.se/app_yellow/index.html你可以看到 iScroll 滚动整个页面。您可以看到滚动条位于页眉和页脚上方。滚动条应该只滚动内容,不包括页眉和页
我有一个 iOS 网络应用程序,它被证明在滚动方面非常困难! iScroll 4 终于解决了这个问题。但是,当我将手指从屏幕上移开时,滚动部分似乎又回到了原来的位置。 有人知道为什么会这样以及如何解决
我是这样调用它的 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); docume
我试图了解视差如何与 iscroll5 配合使用。据我了解,我可以将容器定义为改变滚动速度的指示器。然而我需要做的是同时对多个元素应用速度比。 让我们以下面的示例为例,如何立即更改所有 h2 元素的
如何防止 iScroll 移出页面? https://github.com/cubiq/iscroll/blob/master/demos/simple/index.html 即。这个: 向上滚动时变
我想在 ipad 中滚动 div。我用的是滚动。像这样: $(document).on("pagecreate",function(event){ var myScroll = new IS
iScroll 文档显示了典型的 iScroll 设置,如下所示。 var myScroll; function loaded() { setTimeout(function () {
我想知道是否可以使用 IScroll,更具体地说是 Angular 版本 (github.com/mtr/angular-iscroll),即使内容没有溢出?因此,可以拖动一个非溢出列表(见下图)并用
我是一名优秀的程序员,十分优秀!