jScrollPane:边距问题
jScrollPane 的边距问题似乎有点棘手。尝试在 jsp 内的每个元素和实际的 jsp 元素上设置 margin: 0 。我附上一张图片来向您展示该问题。问题是内容和实际滚动条之间的小黑色条纹。
JSP 中的类的 CSS
width: 100%;
min-height: 60px;
max-height: 300px;
margin: 0;
padding: 0;
JSP 的 CSS
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0px;
width: 5px;
height: 100%;
background: url('../img/staffUl.png') repeat;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: transparent;
position: relative;
}
.jspDrag
{
background: #2a2a2a;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
Strugglig a bit with what seems to be a margin issue with jScrollPane. Tried setting margin: 0 pretty much on every element that's inside the jsp and on the actual jsp elements. I'm attaching a picture to show you the issue. The problem is the small black stripe between the content and the actual scrollbar.
CSS for classes inside JSP
width: 100%;
min-height: 60px;
max-height: 300px;
margin: 0;
padding: 0;
CSS for JSP
.jspContainer
{
overflow: hidden;
position: relative;
}
.jspPane
{
position: absolute;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0px;
width: 5px;
height: 100%;
background: url('../img/staffUl.png') repeat;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspVerticalBar *,
.jspHorizontalBar *
{
margin: 0;
padding: 0;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: transparent;
position: relative;
}
.jspDrag
{
background: #2a2a2a;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
KG Christensen,
实际上和你有同样的问题。经过一番挖掘,直到我发现这实际上是 jScrollPane 的一个“功能”。解决方案是将配置参数“verticalGutter”设置为0。默认为4px。
应该做的伎俩!
KG Christensen,
Literally just had the same problem as you. Took some digging around until I figured out that this is actually a "feature" of jScrollPane. The solution is to the set the config parameter 'verticalGutter' to 0. It is 4px by default.
Should do the trick!