부드러운 스크롤을 사용하는 Chrome의 충돌

Question

jQuery UI를 사용하여 jQuery를 사용하여 "부드러운 스크롤"을 사용하기 위해 고정 된 탐색 모음으로 웹 사이트를 만들고 있으며 고정 된 그라디언트를 사용하려고합니다. 내 JSfiddle HERE을 참조하십시오.

문제는 스크롤링이 Firefox에서만 작동한다는 것입니다. Chrome 또는 Safari에서는 작동하지 않습니다.

html, body { 
    overflow:hidden; 
    height:100%; 
    } 

Answer 1

본문 요소의 overflow: hidden이 문제입니다.

이렇게 할 수있는 또 다른 방법은 화면에 사용 가능한 모든 공간을 차지하는 div를 추가하는 것입니다. div는 페이지의 다른 요소보다 고정 된 위치와 z- 색인을 가져야합니다. CSS는 다음과 같습니다.

div { 
    background-color:#70e8e6; 
    background:linear-gradient(#70e8e6 40%, #5f5f5f 80%); 
    position: fixed; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
} 

그런 다음 본문 대신 div에 그라디언트를 적용하십시오.

나는이 솔루션으로 jsfiddle 업데이트 : http://jsfiddle.net/dskaddeb/1/