-webkit-overflow-scrolling : 터치;

-webkit-overflow-scrolling : 터치; Apple의 iOS8에서 중단

---

-webkit-overflow-scrolling:touch오버플로 div 관성 스크롤링을 제공하기 위해 여러 곳에서 사용하는 웹 앱에서 작업 중입니다 .

IOS8로 업데이트 한 이후 -webkit-overflow-scrolling: touch로 스크롤 할 수 없게되었으며 지금까지이 문제를 해결할 수 있었던 유일한 방법 -webkit-overflow-scrolling: touch은 표준 고정 스크롤 을 제거 하는 것입니다. 도와주세요!

다음은 iOS5, 6 및 7에서 작동하는 표준 클래스 중 하나의 예입니다.

.dashboardScroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
    -webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
} 

---

iOS 5, 6 및 7에서 잘 스크롤되는 (매우 복잡한) 중첩 스크롤 가능 div와 비슷한 문제가 있었지만 iOS 8.1에서는 간헐적으로 스크롤하지 못했습니다.

내가 찾은 해결책은 브라우저가 GPU를 사용하도록 속이는 모든 CSS를 제거하는 것입니다.

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

이렇게하면 '-webkit-overflow-scrolling : touch;' 여전히 포함될 수 있으며 여전히 정상적으로 작동합니다.

위의 해킹이 iOS의 초기 화신에서 제공 한 스크롤 성능에 대한 (나에게는 모호한) 이득을 희생하는 것을 의미했지만, 그와 관성 스크롤링 사이의 선택에서 관성 스크롤링이 더 중요하다고 간주되었습니다 (그리고 우리는 지원하지 않습니다 더 이상 iOS 5).

나는이 단계에서 왜이 갈등이 존재하는지 말할 수 없다. 이러한 기능의 잘못된 구현 일 수 있지만 CSS에 좀 더 깊이있는 것이 원인이라고 생각합니다. 나는 현재 그것을 시연하기 위해 축소 된 HTML / CSS / JS 구성을 만들려고 노력하고 있지만 아마도 무거운 마크 업 구조와 많은 양의 동적 데이터가 필요합니다.

부록 : 그러나이 수정 사항을 적용하더라도 사용자가 스크롤 할 수없는 요소를 스크롤하기 시작하면 스크롤 가능한 요소를 스크롤 할 수 있으려면 중지 한 후 잠시 기다려야한다고 클라이언트에 알려야했습니다. 이것은 기본 행동입니다.

---

이 문제가 있었고 해결책을 찾았습니다. 해결책은 콘텐츠를 두 개의 컨테이너에 넣어야한다는 것입니다. 예 :(. dashboardScroll> .dashboardScroll-inner) 내부 컨테이너 ".dashboardScroll-inner"에이 css3를 통해 상위 ".dashboardScroll"보다 1px 더 높은 높이를 제공해야합니다. 특성

.dashboardScroll-inner { height: calc(100% + 1px);}

이것을 확인하십시오 :

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

또는 다른 컨테이너를 추가 할 수없는 경우 다음을 사용하십시오.

.dashboardScroll:after { height: calc(100% + 1px);}

---

Cordova 웹 앱에서 동일한 문제가 발생했습니다. 저에게 문제는 제가 <div>애니메이션으로 제작 된 부모 가 있고animation-fill-mode: forwards;

이 속성을 제거하면 문제가 해결되고 깨진 오버플로 스크롤이 수정되었습니다.

---

이전 답변으로는 문제를 해결할 수 없었습니다. 그래서 몇 시간 후 iScroll 라이브러리에 iScroll을 시도 했습니다 . iOS에만 스크롤링을 추가하기 위해 추가 라이브러리 (그리고 상당히 큰 크기)를 포함하는 것은 좋지 않지만 이것이 저에게 효과적이라는 것을 알고 있습니다. Readme를 따르십시오. 라이트 버전이면 충분합니다.

단점 :

• Android에서 스크롤하는 것은 이제 쓰레기처럼 보이지만 더 이상 기본이 아닙니다.
• 더 이상 스크롤하여 페이지를 새로 고칠 수 없습니다.
• Android에 대한 다른 수정 사항을 적용해야합니다. 클릭이 작동하지 않습니다.

내가 그것을 사용할지 확실하지 않지만 필요한 경우 사용하십시오.

---

여기에서 모든 솔루션을 성공하지 못했습니다. -webkit-overflow-scrolling : touch; 속성을 사용하여 작동하도록 만들 수있었습니다 . 스크롤 가능한 div와 부모 컨테이너에 있습니다.

div.container {
    -webkit-overflow-scrolling: touch;
}

div.container > div.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

---

DOM에서 버블 링되는 주변 요소의 터치 이벤트를 방지하는 것도 또 다른 잠재적 솔루션입니다. 주변 DIV 요소가 터치 또는 드래그 이벤트를 수신하면 스크롤이 중지되는 것을 알 수 있습니다. 매끄럽게 스크롤해야하는 메뉴에이 특별한 문제가있었습니다. 이러한 이벤트를 끄면 스크롤 가능 요소의 "고정"을 중지하는 데 도움이되었습니다.

$html.bind('touchmove', scrollLock );

var scrollLock = function(e) {
        if( $body.hasClass('menu-open') ){
                e.stopPropagation();
                e.preventDefault();
        }
};

$html.unbind('touchmove', scrollLock );

---

나도 약간의 문제가 있었지만 약간 다른 시나리오입니다.

나는 문제없이 관성이있는 내 사업부를 가지고 있습니다.

나는 당신이 볼 수있는 간단한 JSFiddle이 있습니다.

https://jsfiddle.net/SergioM/57f2da87/17/

.scrollable {
    width:100%;
    height:200px;
    -webkit-overflow-scrolling:touch;
    overflow:scroll;
}

도움이 되었기를 바랍니다.

---

mohammed Suleiman의 답변 (.dashboardScroll : after {height : calc (100 % + 1px);})에서 마지막 방법을 사용했지만 그 결과 내 콘텐츠 아래에 100 % + 1px의 빈 공간이있었습니다. 500ms 후에 높이를 다시 1px로 변경하여이 문제를 해결했습니다. 추악하지만 작동합니다.

이것은 react.js 앱이므로 내 코드는 다음과 같습니다.

componentDidUpdate() {
    if (window.navigator.standalone && /* test for iOS */) {
        var self = this;
        setTimeout(function(){
            self.refs.style.innerHTML = "#content::after { height: 1px}";
        }, 500);
    }
}

렌더링 :

render() {
    var style = '';
    if (window.navigator.standalone && /* test for iOS */) {
        style = "#content::after { height: calc(100% + 1px)}";
    }
    return (<div>
                <style type="text/css" ref="style">
                    {style}
                </style>
                <div id="content"></div>
            </div>);
}

---

각도 부트 스트랩 모달을 사용하는 동안이 문제가 발생했습니다. 내 스타일 시트를 만들고 미디어 쿼리에서 고정 너비와 여백을 제거하여 문제를 해결했습니다.

실물:

  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }

@media (min-width: 768px) {
  .modal-dialog {
      width: 600px;
      margin: 30px auto;
  }
    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    .modal-sm {
        width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

변경 사항 :

.modal-dialog {
    margin: 0px;
    margin-top: 30px;
    margin-left: 5%;
    margin-right: 5%;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: auto;
        margin-left: 10%;
        margin-right: 10%;
    }
    .modal-content {
       -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        width: auto;
        margin-left: 15%;
        margin-right: 15%;
    }  
}

참조 URL : https://stackoverflow.com/questions/26176288/webkit-overflow-scrolling-touch-breaks-in-apples-ios8