Calc 스크롤바가 나타날 때 페이지가 점프하지 않는 문제 해결

이번에는 Calc 스크롤바가 나타날 때 페이지가 점프하지 않는 문제에 대한 해결방법을 알려드리겠습니다. 사례를 살펴보겠습니다.

calc()란 무엇입니까?calc()는 말 그대로

함수 함수

로 이해할 수 있습니다. 실제로 calc는 영어단어 계산(calculate)의 약어로 CSS3의 새로운 기능으로 요소의 길이를 지정하는데 사용된다. 예를 들어 calc()를 사용하여 요소의 테두리, 여백, 패딩, 글꼴 크기 및 너비 속성에 대한 동적 값을 설정할 수 있습니다. 값을 얻기 위해 표현식을 사용하기 때문에 이를 동적 값이라고 부르는 이유는 무엇입니까? 하지만 calc()의 가장 큰 장점은 calc()를 통해 요소의 너비를 계산할 수 있다는 점이다. 문법

calc() = calc(四则运算)

예:

.elm {
  width: calc(expression);
}

여기서 "expression"은 길이를 계산하는 데 사용되는 표현식입니다.

설명

은 길이 값을 동적으로 계산하는 데 사용됩니다.

연산자 앞뒤에 공백을 예약해야 합니다. 예: width: calc(100% - 10px)
모든 길이 값은 calc() 함수를 사용하여 계산할 수 있습니다.
calc() 함수는 "+", "-", "*", "/" 연산을 지원합니다.
calc() 함수는 표준 수학 연산 우선순위 규칙을 사용합니다.
간단한 예:

nbsp;html>


<meta>
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta>
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>


<p>我的宽度为100% - 50px</p>

다음은 가장 일반적으로 사용되는 것입니다. 스크롤 막대가 나타날 때 점프하지 않고 페이지를 구현하는 애플리케이션페이지 콘텐츠가 동적으로 로드되면 처음에는 스크롤 막대가 없습니다. 콘텐츠가 증가한 후에 스크롤 막대가 나타납니다. 고정 너비 중앙 정렬 레이아웃을 사용하는 경우 스크롤 막대 너비 하나만큼 왼쪽으로 오프셋됩니다. 해결책은 모든 콘텐츠에 Overflow-y:scroll을 추가하거나 콘텐츠에 따라 CSS로 채운 다음 콘텐츠를 추가하는 것입니다. 이 문서에서는 스크롤 막대 너비를 계산하는 계산을 소개합니다. 스크롤 막대 너비는 콘텐츠 외부에서도 시뮬레이션되므로 오프셋되지 않습니다. ·

매우 간단합니다. 단 한 줄의 코드로 작업을 완료할 수 있습니다.

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

또는:

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

우선 .wrap-outer는 중앙 고정 너비 본문의 상위 항목을 참조합니다. 그렇지 않은 경우 하나 만듭니다. (본문을 사용하는 것도 비슷한 효과를 얻을 수 있지만 너비 분리 원칙에 따라 권장되지 않습니다.)

그런 다음 calc는 CSS3의 계산이며 IE10+ 브라우저에서 지원되며 IE9 브라우저에서는 기본적으로 지원되지 않습니다.

배경 위치

)에 사용됩니다.

마지막으로 100vw는 브라우저의 window.innerWidth를 기준으로 한 브라우저의 내부 너비입니다. 그리고 100%는 사용 가능한 너비, 즉 스크롤 막대가 없는 너비입니다.

그래서 calc(100vw - 100%)는 브라우저 스크롤바의 너비입니다(스크롤바가 있으면 0, 스크롤바가 없으면 0입니다)! 왼쪽과 오른쪽에 스크롤 막대 너비가 있는 경우(또는 둘 다 0인 경우) 기본 콘텐츠는 점프 없이 항상 브라우저 중앙에 배치될 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

css3의 포인터 이벤트 사용에 대한 자세한 설명

focus-within

사용에 대한 자세한 설명

위 내용은 Calc 스크롤바가 나타날 때 페이지가 점프하지 않는 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!