Chrome에서 .html 페이지를 일관된 너비로 유지하려는 작은 문제가 있습니다. 그 페이지 (1). 페이지 (2)에서 동일한 레이아웃 (메뉴, div 등)을 가지고 있지만 콘텐츠가 적기 때문에 수직 스크롤 막대가 없습니다.
문제는 (1) 페이지에서 스크롤 막대가 요소를 약간 왼쪽으로 밀어내는 것 (너비에 더해 지나요?)이지만 모든 것이 페이지의 중앙에 잘 맞춰진 것 같습니다 (2).
나는 여전히 HTML / CSS / JS의 초보자이고 이것이 그렇게 어렵지 않다고 확신하지만 해결책을 알아낼 운이 없었습니다. IE10 및 FireFox (비 간섭 스크롤바)에서 의도 한대로 작동하지만 Chrome에서만 발생했습니다.
답변
스크롤바 크기를 얻은 다음 컨테이너에 여백을 적용 할 수 있습니다.
이 같은:
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}h- 스크롤바 제거를위한 CSS :
body{
overflow-x:hidden;
}이것을보십시오 :
http://jsfiddle.net/NQAzt/
답변
DISCLAIMER : 오버레이 는 더 이상 사용되지 않습니다 .
꼭 필요한 경우 여전히 이것을 사용할 수 있지만 사용하지 마십시오.
이것은 WebKit 브라우저에서만 작동 하지만 많이 좋아합니다. auto다른 브라우저 에서처럼 작동 합니다.
.yourContent{
overflow-y: overlay;
}이렇게하면 스크롤바가 오버레이 로만 나타나 므로 요소 의 너비 에 영향을주지 않습니다 !
답변
다음을 추가하기 만하면됩니다.
html {
overflow-y: scroll;
}CSS 파일에서 필요한지 여부에 관계없이 스크롤러가 있지만 스크롤 할 수는 없습니다.
즉, 뷰포트의 너비는
답변
아마
html {
width: 100vw;
}당신이 원하는 것입니다.
답변
Safari 및 Chrome과 같은 Webkit 브라우저는 너비 (100 % 또는 100vw)를 계산할 때 보이는 페이지 너비에서 스크롤 막대 너비를 뺍니다. DM Rutherford의 스크롤링 및 페이지 너비에 대해 자세히 알아보십시오 .
overflow-y: overlay대신 사용해보십시오 .
답변
추가 할 수 있음을 알았습니다.
::-webkit-scrollbar {
display: none;
}내 CSS에 직접 연결하면 스크롤 막대가 보이지 않지만 여전히 스크롤 할 수 있습니다 (적어도 Chrome에서). 페이지에 산만 한 스크롤바를 원하지 않을 때 유용합니다!
답변
너비가 고정 된 컨테이너의 경우 컨테이너를 다른 div로 래핑하고 두 div에 동일한 너비를 적용하여 순수한 CSS 크로스 브라우저 솔루션을 구현할 수 있습니다.
#outer {
overflow-y: auto;
overflow-x: hidden;
/*
* width must be an absolute value otherwise the inner divs width must be set via
* javascript to the computed width of the parent container
*/
width: 200px;
}
#inner {
width: inherit;
}