Chrome의 JScrollPane 관련 문제

Question

내 페이지 중 하나에서 jScrollpane을 구현했지만 매우 이상한 동작이 나타났습니다. 스크롤 막대가 구현 된 div를 클릭하면 페이지의 프레임과 마찬가지로 전체 div가 테두리로 선택됩니다. 크롬에서만이 문제가 발생합니다. 그것은 FF, 오페라 같은 다른 브라우저에서 잘하는 것 같습니다.

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

이 외에도 나는 분으로 설정하고 - 높이와 컨텐츠 디스플레이 블록의 폭을하는 I 이 콘텐츠에는 불필요하다고 가정합니다.

이제는 약간의 변경을 한 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

크롬 브라우저에서 jScrollPane이 사용되면 기본적으로 jScrollPane 영역에 외곽선이 추가되어 그것에 집중하십시오.

그러나 CSS를 사용하여 jScrollPane이 적용된 div에 outline:none; 속성을 적용하여 제거 할 수 있습니다.

여기에 the fiddle이 있습니다.

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

그리고 CSS에

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

로 .scroll-pane에 outline:none; 속성을 적용 그때가 JScrollPane에 강조 파란색 1 {을 제거합니다

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

이 같은 jQuery를 사용 JScrollPane의 적용.