iOS에서 CSS 오버플로가있는 스크롤 막대를 얻는 방법

iPad 웹 사이트를 overflow: auto개발할 때 필요한 경우 CSS 속성을 사용하여 스크롤 막대를 가져 오려고했지만 div두 손가락 스크롤이 작동하더라도 장치가 표시를 거부하고 있습니다.

나는 시도했다

overflow: auto;

과

overflow: scroll;

결과는 동일합니다.

나는 iPad에서만 테스트하고 있습니다 (데스크톱 브라우저에서 완벽하게 작동합니다).

어떤 아이디어?

kritzikratzi의 왼쪽 댓글에 따라 편집하십시오 .

[시작] ios 5beta -webkit-overflow-scrolling: touch에서는 예상되는 동작을 유발하는 새 속성 을 추가 할 수 있습니다.

일부, 아주 적은 추가 읽기 :

• iOS 5의 기본 모멘텀 스크롤

후손을 위해 남겨진 원래 답변 .

불행히도 overflow: auto, 또는 둘 다 scrolliOS 장치에서 스크롤바를 생성 하지 않습니다 . 분명히 그러한 유용한 메커니즘을 차지하는 화면 너비 때문입니다.

대신 사용자가 overflow-ed 콘텐츠 를 스크롤하려면 두 손가락으로 스 와이프를 수행해야합니다 . 유일한 참조는 전화 자체의 설명서를 찾을 수 없기 때문에 여기에서 찾을 수 있습니다. tuaw.com : iPhone 101 : Two-fingered scrolling .

내가 생각할 수있는 유일한 해결 방법은 JavaScript 나 jQTouch를 사용하여 overflow요소에 대한 고유 한 스크롤 막대를 만들 수있는 경우 입니다. 또는 @media 쿼리 를 사용 overflow하여 콘텐츠 를 제거하고 전체를 표시 할 수 있습니다 . iPhone 사용자는 단순성을 위해서만 내 투표를받습니다. 예를 들면 :

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

앞의 코드는 위에 링크 된 동일한 기사의 A List Apart 에서 가져온 것입니다 (왜를 떠 났는지 모르겠지만 이유 type="text/css"가 있다고 가정합니다.

CSS에이 코드 적용

::-webkit-scrollbar{

    -webkit-appearance: none;
    width: 7px;

}

::-webkit-scrollbar-thumb {

    border-radius: 4px;
    background-color: rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

나는 몇 가지 테스트를 수행하고 작동 스크롤바를 다시 정의 CSS3를 사용하고 유지할 수있는 당신의 Overflow:scroll;또는Overflow:auto

나는 이런 식으로 결국 ...

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
} 

아직 알아낼 ​​수 없었던 유일한 단점은 iProducts의 스크롤바와 상호 작용하는 방법이지만 콘텐츠와 상호 작용하여 스크롤 할 수 있습니다.

여기 에 Chris Barr가 제공 한 솔루션

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

나를 위해 잘 작동합니다. 일부 클릭을 사용해야하는 경우 event.preventDefault 제거 ...

iScroll4의 자바 스크립트 라이브러리는 바로 그것을 수정합니다. 스크롤바가 사라지지 않도록 hideScrollbar설정할 수 있는 방법이 있습니다 false.

SO의 다른 두 사람은 문제에 대한 가능한 CSS 전용 솔루션을 제안했습니다. David Thomas의 솔루션은 완벽하지만 스크롤바가 스크롤 중에 만 표시된다는 한계가 있습니다.

스크롤바를 항상 표시하려면 다음 링크에서 제안하는 지침을 따를 수 있습니다.

• WebKit / Blink에서 OS X 트랙 패드 사용자에게 스크롤 막대가 숨겨지지 않도록하려면 어떻게해야합니까?
• CSS-오버플로 : 스크롤; -항상 세로 스크롤바를 표시 하시겠습니까?

당신의 몸과 div가 없는지 확인하십시오

  position:fixed

그렇지 않으면 작동하지 않을 것입니다

내 경험상 요소가 작동하도록 display:block;적용 되었는지 확인해야합니다 -webkit-overflow-scrolling:touch;.

나를 위해 잘 작동합니다. 시도해보십시오.

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

이 코드를 사용하면 ios / android APP webview에서 작동합니다. 이식 가능하지 않은 CSS 코드를 삭제합니다.

모바일에서 터치로 가로 div스크롤 을 수행하려는 경우 업데이트 된 CSS 수정이 작동하지 않습니다 (Android Chrome 및 iOS Safari 여러 버전에서 테스트 됨). 예 :

-webkit-overflow-scrolling: touch

해결책을 찾아 CSS 트릭 이전의 수평 스크롤링을 위해 수정했습니다. Android Chrome 및 iOS Safari에서 테스트했으며 리스너 터치 이벤트가 오래 전부터 있었으므로 http://caniuse.com/#feat=touch 좋은 지원을 제공 합니다.

용법:

touchHorizScroll('divIDtoScroll');

기능 :

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}  

수직 솔루션에서 수정 됨 (사전 CSS 트릭) :

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/