Question

我在我的一个页面中实现了jScrollpane，但我发现其中有一个非常奇怪的行为。当我单击实现滚动条的div时，整个div将被选中并带有边框，就像页面中的框架一样。我只在Chrome中遇到此问题。它似乎在FF，Opera等其他浏览器中都很好。

Chrome Output

HTML

<div class="container">
  <div class="main-content">
    <article class="content-display">Some Content</article>
    <article class="content-display">Some Content</article>
    <article class="content-display">Some Content</article>
    <article class="content-display">Some Content</article>
  </div>
</div>

CSS

.container {
    padding-top: 5%;
    width: 100%;
    height: 100%;
    position: relative;
}

.main-content {
    position: absolute;
    width: 80%;
    height: 100%;
    float: left;
    overflow-y: hidden;
    overflow-x: scroll;
    margin-left: 10%;
    margin-right: 10%;
    border: none;
}
.content-display {
    position: absolute;
    z-index: 3900;
    /*padding-left: 6%;
    padding-right: 6%;*/
}

除此之外，我设置了min - 内容显示块的高度和宽度，我认为这个内容是不必要的。

现在 JScrollpane.css 我做了一些细微的修改。

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer {
    overflow: hidden;
    position: relative;
}

.jspPane {
    position: absolute;
}

.jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 100%;
    background: red;
}

.jspHorizontalBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: red;
    border-radius: 100px;
    border-bottom: 0.3px;
    border-bottom-style: ridge;
    border-bottom-color: #EEEEF4;
}

.jspCap {
    display: none;
}

.jspHorizontalBar .jspCap {
    float: left;
}

.jspTrack {
    background: #C6122F;
    position: relative;
    border-radius: 100px;

}

.jspDrag {
    background: white;
    position: relative;
    top: 0;
    left: 0;
    /*cursor: pointer;*/
    height: 400px;
    border-radius: 10px;
    /*background-image: url("../../images/contact/map.png");*/
}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

.jspArrow {
    /*background: #50506d;*/
    text-indent: -20000px;
    display: block;
    /*cursor: pointer;*/
    padding: 0;
    margin: 0;
}

.jspArrow.jspDisabled {
    /*cursor: default;*/
    /*background: #80808d;*/
}

.jspVerticalBar .jspArrow {
    height: 16px;
}

.jspHorizontalBar .jspArrow {
    width: 0px;
    float: left;
    height: 100%;
}

.jspVerticalBar .jspArrow:focus {
    outline: none;
}

.jspCorner {
    background: #eeeef4;
    float: left;
    height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
    margin: 0 -3px 0 0;
}

请帮我调试一下。非常感谢。在这个上下文中，我还想知道如何增加滚动拖动的大小，更具体地说是元素.jspDrag

Answer 1

在chrome浏览器中，当使用jScrollPane时，默认情况下会在jScrollPane区域添加一个轮廓以标记焦点。

但是可以通过将属性outline:none;应用于应用了jScrollPane的div来使用CSS删除它。

the fiddle 演示相同内容。

<div class="scroll-pane">
  test<br/>
  test<br/>
  test<br/>
</div>

然后在CSS中将outline:none;属性应用于.scroll-pane

.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
    outline: none;
}

然后使用jquery将jScrollPane应用为

$(function(){
    $('.scroll-pane').jScrollPane();
});

这将删除jScrollPane中的蓝色轮廓突出显示。

Chrome中的JScrollPane问题

1 个答案: