모바일에서 오버플로되는 콘텐츠가있는 스크롤 된 고정 된 div

나는 반응이있는 웹 사이트를 가지고 있으며 모바일 용 Facebook 유사 슬라이더를 만들었습니다. 그래서 나는 아주 평범한 셋업을 만들었는데, 이것은 지금까지 꽤 깔끔하게 작동합니다. 전신을 채우는 모든 내용을 .outer_wrapper에 가지고 있습니다. 나는 트리거를 누를 때모바일에서 오버플로되는 콘텐츠가있는 스크롤 된 고정 된 div

.slider { 
    position: fixed; 
    height: 100%; 
    right: 0; 
    top: 0; 
    width: 250px; 
}

이 왼쪽에 .outer_wrapper과 .slider 나타납니다 이동이 래퍼에서 다음과 같은 CSS와 .slider DIV이다.

$('.hamburger-menu').click(function() { 
    $('.outer_wrapper').animate({marginLeft: '-250px', marginRight: '-250px'}, 'slow'); 
});

문제 .slider이 넘치는 컨텐츠를 가지고,하지만 휴대폰에 스크롤 거부합니다. 항상 .outer_wrapper의 내용을 스크롤합니다. 나는 -webkit-overflow-scrolling:touch;과 overflow-y: scroll;을 시도했다.

편집 :.slider은 (는) .outer_wrapper의 하위 항목이 아닙니다. 그래서 내 몸은 다음과 같은 구조를 가지고 있습니다 :

<body> 
    <div class=".outer_wrapper"> 
    <!-- all the lovely content is here --> 
    </div> 
    <div class="slider"> 
    <!-- some menu items here --> 
    </div> 
</body>

어떤 조언이 있습니까?

출처

2014-11-02 supersize

휴대 전화 UI 용입니까? –

@MatildaYiPan 예! – supersize

그래 맞아. 나는 문제가 플러그인 이름에서 사용한 것임을 알게되었습니다. Skrollr. 를 비활성화하는 경우 :

overflow-y: scroll;

또는

overflow: scroll; 
overflow-x: hidden;

작품을 잘. 다음 웹킷 장치가 부드럽게 만드는 것은 멋진 일

-webkit-overflow-scrolling: touch;

주어진 경우 내가 대답으로이 표시됩니다 이유는 전체 질문, 변경을한다.

출처

2014-11-04 12:47:52 supersize

.slider은 .outer_wrapper 밖에 위치해야합니다. 그런 다음 클래스를 전환하고 CSS 변환을 사용하여 둘 다 애니메이션으로 만듭니다. 이렇게하면 사용자가 페이지를 스 와이프 할 때 서로 충돌하지 않습니다.

는 시도이

.slider { 
    position:fixed; 
    height:100%; 
    width:250px; 
    top:0; 
    left:0; 

    -webkit-transform:translate(-250px,0px); 
    transform:translate(-250px,0px); 

    -webkit-transition:all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 

.slider.reveal { 
     -webkit-transform:translate(0px,0px); 
     transform:translate(0px,0px); 
} 


.outer_wrapper { 
    margin:0; 
    width:100%; 
    height:100%; 
    position:relative; 
    -webkit-transform:translate(0px,0px); 
    transform:translate(0px,0px); 

    -webkit-transition:all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 


.outer_wrapper.hide { 
     -webkit-transform:translate(250px,0px); 
     transform:translate(250px,0px); 
}

와 jQuery를위한

다음과 같이 toggleClass 기능을 사용하는 데 도움이

$('.hamburger-menu').click(function() { 
     $('.outer_wrapper’).toggleClass(‘hide’); 
     $(‘.slider’).toggleClass(‘reveal’); 
});

희망을?

출처

2014-11-03 12:08:27

도와 주신 귀하의 시도에 정말 감사드립니다. 불행히도 나는'.slider'가'.outer_wrapper'의 자식이 아니라는 것을 언급해야했습니다. 기본적으로 당신이 제안한 것이지만 jQuery 애니메이션을 사용했습니다. – supersize

아, 죄송합니다. 이상하게도 과거에는 나를 일관되게 잘 견뎌냈습니다. 햄버거 메뉴를 클릭했을 때 바깥 쪽 래퍼에 비활성화 비활성화 스크롤을 추가하면 어떻게됩니까? 즉 overflow-y : 숨김; 또한 메뉴 슬라이더의 Z- 색인이 외부 랩퍼보다 큰지 확인하십시오. –

wrapper에서'overflow-y : hidden; '을 사용하는 것이 좋습니다. 즉시 시도 할 것입니다.나는'z-index'를 염두에두고 있습니다. – supersize

모바일에서 오버플로되는 콘텐츠가있는 스크롤 된 고정 된 div

답변

관련 문제