CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromejscrollpane
Genocide_Hoax
Genocide_Hoax

Reputation: 853

Problems with JScrollPane in Chrome

I implemented jScrollpane in one of my page , but I noticed a very strange behavior in it. When I click on the div in which the scroll bar is implemented the entire div gets selected with a border , just like a frame in page. I am experiencing this behavior in Chrome only. It seems to be fine in other browsers like 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%;*/
}

In addition to this I am setting min - height and width of the content-display blocks , which I suppose is unnecessary in this content.

And Now the JScrollpane.css in which I made some slight changes.

/*
 * 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;
}

Please help me debug this. Thanks a lot. In this context I would also like to know how do I increase the size of the scroll drag more specifically the element .jspDrag

Upvotes: 0

Views: 1016

Answers (1)

Mazzu
Mazzu

Reputation: 2839

In chrome browser, when jScrollPane is used then by default an outline gets added on jScrollPane area to mark the focus on it.

But it can be removed using CSS by applying property outline:none; to the div on which jScrollPane is applied.

Here is the fiddle demonstrating the same.

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

Then in CSS apply outline:none; property to .scroll-pane as

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

Then applied jScrollPane using jquery as

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

This will remove blue outline highlighting in jScrollPane.

Upvotes: 1

Related Questions