Fatal编程技术网
  • javascript/
  • Javascript jQuery jScrollPane仅适用于文本

Javascript jQuery jScrollPane仅适用于文本

javascript jquery iframe

Javascript jQuery jScrollPane仅适用于文本,javascript,jquery,iframe,scrollbar,jscrollpane,Javascript,Jquery,Iframe,Scrollbar,Jscrollpane,我正在尝试使用在iframe中滚动浏览我的图库。我使用jQuery代码从中滚动iframe。 使用此代码不适用于我的图像（它只是隐藏原始浏览器滚动条，不会引发任何错误并拒绝滚动），但如果我将图像替换为多个段落，使其溢出（如示例中所示），则此代码可以完美地工作。 编辑：我忘了提到使用默认浏览器滚动条可以完美滚动图像。 编辑#2: 以下是我的图库的结构： ... </head> <body> <div id="content"> // Used the same

我正在尝试使用在
iframe
中滚动浏览我的图库。我使用jQuery代码从中滚动iframe。
使用此代码不适用于我的图像（它只是隐藏原始浏览器滚动条，不会引发任何错误并拒绝滚动），但如果我将图像替换为多个段落，使其溢出（如示例中所示），则此代码可以完美地工作。
编辑：我忘了提到使用默认浏览器滚动条可以完美滚动图像。
编辑#2:

以下是我的图库的结构：

...
</head>
<body>
<div id="content">  // Used the same way as in the example, works with text
 <div class="gallery">

  <div class='picture'>
   <img class='pin' src='something'/>
    <div class='wrapper'>
     <img class='thumbnail' src='something'/>
     <img class='border' src='something' />
    </div>
  </div>

  <div class='picture'>
  ...
  </div>

 </div>
</div>
...
我忽略了边距和其他一些不相关的东西，但你明白了。
jQuery代码与中显示的完全相同。

我认为问题在于，图像是在scrollbar初始化后加载的，并且scrollbar默认情况下不会检测到容器大小的更改。如果仔细阅读文档，您可以看到下一步：

显示如何也可以使用，使内容 如果图像在其中，则会在jScrollPane中正确显示

因此，请尝试
自动重新初始化
选项。如果没有帮助的话-用jsFiddle.net上的iframe示例更新您的问题

解决了它
显然，脚本不喜欢我的
.picture.pin
的
绝对位置。将其更改为
relative
并重新设置一点样式解决了我的问题。


尝试添加“自动重新初始化”：在jScrollPane设置中为true，但似乎没有任何变化。仍然没有错误。

.gallery {
 position: relative;
 width: 98%;
}
.picture {
 float: left;
 position: relative;
 display: list-item;
 list-style-type: none;
 width: 11%;
}
.picture .pin {
 position: absolute;
 left: 48%;
 width: 13%;
}
.picture .thumbnail {
 position: absolute;
 width: 89%;
 margin-top: 19%;
}
.picture .border {
 position: absolute;
 width: 100%;
}