CSS 스크롤바

Question

오버 플로워 숨겨와 내부 용기 부정적인 이익률과 같이 승 나는/외부 용기를 만드는 고전적인 방법을 사용하여 수직 스크롤 막대를 숨기려고하고있다 : 사실

.Wrapper { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 

.Items { 
    display:block; 
    margin-right:-17px; /* Scrollbar's width */ 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 

스크롤바는 데스크톱/노트북에서 볼 때 숨겨집니다.

유감스럽게도 터치 모바일 기기 (휴대 전화/태블릿)가 아니요 스크롤바를 표시한다는 것을 알았습니다. 대신에 스크롤을 터치하면 작은 스크롤바가 나타납니다. 문제는 스크롤바가 바탕 화면에 스크롤 막대처럼 추가 너비를 추가하지 않는다는 것입니다 (17px). 그래서 테두리 밖으로 당기고 내 콘텐츠 17px를 숨기는 마이너스 여백으로 끝납니다.

는 또한 absolute 위치로 내부 용기 .Items하지만 내가 같은 결과 :(

.Items { 
    position:absolute; 
    top:0; 
    left:0; 
    right:-17px; 
} 

내가 그렇게 내가 부정적인 마진을 제거 할 수 있습니다 스니핑 일부 브라우저를 할 생각을 가지고 시도 할 때 사용자보기 모바일 기기에서 웹 페이지하지만 난 그에게 나쁜 관행을 알고있다.

순수 CSS로 문제를 해결할 수있는 방법이 있습니까?

Problem preview

Answer 1

@media 쿼리를 통해 작은 뷰포트의 스타일을 정의 할 수 있습니다. 당신은 당신의 CSS 규칙의 끝 부분에 다음 코드를 추가해야합니다

@media screen and (max-width: 992px) { 
    .Items { 
     position:absolute; 
     top:0; 
     left:0; 
     right: -17px; 
     overflow-y: scroll; 
/* any style in this section will afect on Items 
    on mobile and tablets with screen width less than 993px*/ 
    } 
}