스크롤바없이 뷰포트 너비 (vw)를 계산할 수 있습니까?
제목에서 언급했듯이 vwCSS에서만 스크롤바없이 계산할 수 있습니까?
예를 들어, 내 화면의 너비는 1920px. vw반환합니다 1920px. 하지만 제 실제 몸통은 1903px.
1903pxCSS로만 값 을 검색 할 수있는 방법이 있습니까 (의 직계 자식뿐만 아니라 body), 아니면 JavaScript가 절대적으로 필요합니까?
이를 수행하는 한 가지 방법은 calc를 사용하는 것입니다. 내가 아는 한 100 %는 스크롤바를 포함한 너비입니다. 따라서 다음과 같이하면됩니다.
body {
width: calc(100vw - (100vw - 100%));
}
스크롤바의 너비를 뺀 100vw를 얻습니다.
예를 들어 뷰포트의 50 % (스콜 바 너비의 50 % 빼기) 인 정사각형을 원하는 경우 높이로도이 작업을 수행 할 수 있습니다.
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
specs 에 따르면 뷰포트 상대 길이 단위는 스크롤바를 고려하지 않습니다 (실제로 존재하지 않는다고 가정).
따라서 의도 한 동작이 무엇이든 이러한 단위를 사용할 때 스크롤바를 고려할 수 없습니다.
Webkit 브라우저는 스크롤바를 제외하고 다른 브라우저는 반환 된 너비에 포함합니다. 물론 이것은 문제로 이어질 수 있습니다. 예를 들어 높이를 동적으로 추가하는 ajax로 콘텐츠를 동적으로 생성 한 경우 Safari는 페이지 시각화 중에 레이아웃에서 다른 레이아웃으로 전환 할 수 있습니다. 좋습니다. 자주 발생하지는 않지만 문제가 발생합니다. 알고 있습니다. 모바일에서는 문제가 적고 스크롤바가 일반적으로 표시되지 않습니다.
즉, 문제가 모든 브라우저에서 스크롤바없이 뷰포트 너비를 정확히 계산하는 것이라면 내가 아는 한 좋은 방법은 다음과 같습니다.
width = $('body').innerWidth();
이전에 설정 :
body {
margin:0;
}
문서가로드되면 CSS 변수를 정의하는 자바 스크립트 줄을 추가하여이를 수행합니다.
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
그런 다음 CSS var(--scrollbar-width)에서 다른 너비의 스크롤바가 있거나없는 다른 브라우저에 필요한 조정을 수행 할 수 있습니다 . 당신은 대체, 필요한 경우 수평 스크롤 비슷한 일을 할 수있는 innerWidth과 innerHeight와 clientWidth함께 clientHeight.
vw단위는 고려하지 않는 overflow-y경우 계정에 스크롤 막대를 overflow-y설정한다 auto.
로 변경 overflow-y: scroll;하면 vw단위는 스크롤바가없는 뷰포트가됩니다.
고려해야 할 단점 만 있습니다. 콘텐츠가 화면에 맞으면 스크롤바가 표시됩니다. 가능한 해결책은 javascript 에서로 변경하는 auto것 scroll입니다.
"calc"로 코드를 엉망으로 만들지 않고 작동하는 유일한 방법은 컨테이너 요소 크기를 100vw로 만드는 것입니다. overflow-x에 대한 컨테이너 주위에 래퍼 추가; 그러면 스크롤바가 콘텐츠 위에있는 것처럼 컨테이너가 전체 너비가됩니다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{ overflow-y: scroll; }
html, body{ padding:0; margin: 0;}
#wrapper{ overflow-x: hidden; }
.row{ width: 100vw; }
.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="row-left"></div>
<div class="row-right"></div>
</div>
</div>
</body>
</html>가장 쉬운 방법은 html 및 body를 100vw로 설정하는 것입니다.
html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }
유일한 문제는 스크롤바가 표시되면 맨 오른쪽이 약간 잘린다는 것입니다.
내 솔루션은 아니지만 전체 범위가 아닌 상대 요소에서 절대로 드롭 다운 전체 너비 메뉴를 만드는 데 도움이됩니다.
: root의 css var에서 스크롤을 얻어서 사용해야합니다.
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }
'programing' 카테고리의 다른 글
| Entity Framework 7 데이터베이스 우선 POCO 생성기가 있습니까? (0) | 2021.01.15 |
|---|---|
| slf4j-log4j12와 log4j-over-slf4j의 차이점 (0) | 2021.01.15 |
| google ()과 maven의 차이점 {url 'https://maven.google.com'} (0) | 2021.01.15 |
| 이미 이동 한 파일을 제외한 모든 파일이 하위 디렉토리에 있도록 기록을 다시 작성하려면 어떻게해야합니까? (0) | 2021.01.14 |
| 왜 어떤 사람들은 이동 할당에 스왑을 사용합니까? (0) | 2021.01.14 |