CSS를 사용하여 요소가 스크롤 막대로 스크롤되는 것을 방지하는 방법

CSS의 위치 속성을 사용하여 요소가 스크롤 막대로 스크롤되지 않도록 설정할 수 있으며 구문은 "위치: 고정"입니다. position 속성은 요소의 위치 지정 유형을 지정합니다. 값이 고정되면 요소는 슬라이더를 어떻게 움직여도 브라우저 창에서 동일한 위치에 고정됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 고정 위치 지정(position:fixed;)을 사용하여 요소가 스크롤 막대와 함께 스크롤되지 않도록 요소의 위치를 ​​고정할 수 있습니다.

fixed는 고정 위치 요소를 생성하며 문서 흐름의 위치를 ​​차지하지 않으며 문서 흐름 위에 떠 있고 브라우저 창을 기준으로 배치되는 것으로 이해될 수 있습니다.

고정 위치 요소는 브라우저 창을 기준으로 배치됩니다. 슬라이더를 어떻게 움직여도 브라우저 창을 기준으로 고정된 위치에 고정됩니다. 또한 해당 위치에 있는 형제 요소는 무시됩니다. 레이아웃. 이때 사용되는 위쪽, 아래쪽, 왼쪽, 오른쪽도 브라우저 창을 기준으로 합니다.

예:

nbsp;html>

    
        <meta>
        <style>
            .logo {
                width: 540px;
                height: 258px;
                position: fixed;
                background: url(猫/images/1.jpg) no-repeat;
                margin: auto;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
        </style>
    

    
        <div> </div>
        布偶猫<br> 布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>
    

Rendering:

위의 예에서 볼 수 있듯이: position:fixed를 사용하면 이미지 위치를 변경되지 않은 상태로 고정할 수 있으므로 드래그로 이미지 위치가 변경되지 않습니다. 텍스트.

참고:

IE7 이상, Firefox, Opera 및 Safari에서는 CSS 속성 "position:fixed"가 지원됩니다. 해당 기능은 창을 기준으로 요소의 위치를 ​​고정하는 것입니다.

하지만 IE6에서는 position:fixed 속성이 지원되지 않습니다. 이때 IE6을 해킹해야 합니다.

추천 학습: css 비디오 튜토리얼

위 내용은 CSS를 사용하여 요소가 스크롤 막대로 스크롤되는 것을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!