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

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"가 있다고 가정합니다.

---

나는 몇 가지 테스트를 수행하고 작동 스크롤바를 다시 정의 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의 스크롤바와 상호 작용하는 방법이지만 콘텐츠와 상호 작용하여 스크롤 할 수 있습니다.

---

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);
}

---

여기서 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의 솔루션은 완벽하지만 스크롤 중에 만 스크롤바가 표시된다는 한계가 있습니다.

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

• How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?
• CSS - Overflow: Scroll; - Always show vertical scroll bar?

---

make sure your body and divs have not a

  position:fixed

else it would not work

---

In my experience you need to make sure the element has display:block; applied for the -webkit-overflow-scrolling:touch; to work.

---

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

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

Use this code, it work in ios/android APP webview; It delete some not portable css code;

---

If you are trying to achieve horizontal div scrolling with touch on mobile, the updated CSS fix does not work (tested on Android Chrome and iOS Safari multiple versions), eg:

-webkit-overflow-scrolling: touch

I found a solution and modified it for horizontal scrolling from before the CSS trick. I've tested it on Android Chrome and iOS Safari and the listener touch events have been around a long time, so it has good support: http://caniuse.com/#feat=touch.

Usage:

touchHorizScroll('divIDtoScroll');

Functions:

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

Modified from vertical solution (pre CSS trick):

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

---

Works fine for me, please try:

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

참고URL : https://stackoverflow.com/questions/3845445/how-to-get-the-scroll-bar-with-css-overflow-on-ios