CSS3 Calc 스크롤바가 페이지에서 점프하지 않는 문제 해결-CSS 튜토리얼-php.cn

CSS3 Calc 스크롤바가 페이지에서 점프하지 않는 문제 해결

巴扎黑

풀어 주다： 2017-09-18 11:31:38

원래의

2047명이 탐색했습니다.

calc는 요소의 길이를 지정하는 데 사용되는 CSS3의 새로운 기능입니다. calc()의 가장 큰 장점은 유동 레이아웃에서 사용된다는 점입니다. calc()를 통해 요소의 너비를 계산할 수 있습니다. 다음으로 Script House의 편집자가 페이지가 점프하지 않는 스크롤 막대 문제의 CSS3 Calc 구현을 공유하겠습니다. 필요한 친구들은 참고할 수 있습니다

calc()가 무엇인가요?

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

Syntax

calc() = calc(四则运算)

로그인 후 복사

예:

.elm {
  width: calc(expression);
}

로그인 후 복사

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

Explanation

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

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

간단한 예:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>
</head>
<body>
<p class="test">我的宽度为100% - 50px</p>
</body>
</html>

로그인 후 복사

가장 일반적으로 사용되는 것은 아래에 설명되어 있습니다. 스크롤 막대가 나타날 때 페이지를 구현하는 애플리케이션은 스크롤 막대가 나타날 때 점프하지 않습니다.

페이지 콘텐츠가 동적으로 로드되면 스크롤이 없습니다. 처음에는 막대가 표시되고 콘텐츠가 막대를 늘린 후에 스크롤이 표시됩니다. 그런 다음 고정 너비 중앙 정렬 레이아웃을 사용하면 스크롤 막대 너비 하나만큼 왼쪽으로 오프셋됩니다. 해결책은 모든 콘텐츠에 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인 경우) 기본 콘텐츠는 점프 없이 항상 브라우저 중앙에 배치될 수 있습니다.

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