수직 스크롤을 허용하면서 HTML 요소의 X축 위치를 어떻게 수정할 수 있습니까?

X축에서만 요소 수정: 스크롤 시 수평 위치 유지

웹 개발에서 요소의 정확한 위치 지정은 사용자 경험과 미학. 일반적인 시나리오 중 하나는 요소가 x축에 고정되어 있지만 사용자의 탐색 경험에 따라 수직으로 스크롤되는 것입니다.

질문:

수정이 ​​가능합니까? x축에만 HTML 요소의 위치를 ​​지정하여 페이지 콘텐츠와 함께 수직으로 스크롤할 수 있지만 수평은 유지합니다. 위치?

답변:

예, CSS와 JavaScript의 조합을 통해 이를 달성할 수 있습니다. 이를 수행하는 방법은 다음과 같습니다.

CSS:

요소의 위치를 ​​절대 위치로 정의하고 상단 오프셋을 지정합니다.

#my-element {
    position: absolute;
    top: 15px;
}

JavaScript:

jQuery를 사용하여 이벤트 추가 창의 스크롤 이벤트를 리스너합니다. 리스너 내에서 현재 스크롤 위치를 기준으로 요소의 왼쪽 위치를 조정합니다.

$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft()
    });
});

CSS에서는 요소가 페이지 상단 위에 유지되도록 15픽셀의 상단 오프셋으로 요소의 절대 위치를 지정합니다. . JavaScript 코드는 사용자가 스크롤할 때 요소의 왼쪽 오프셋이 동일하게 유지되어 수평으로 이동하는 것을 방지합니다.

참고:

요소의 왼쪽 위치를 유지하려면 CSS에서 변경되더라도 다음 업데이트된 JavaScript 코드를 사용할 수 있습니다.

var leftOffset = parseInt($("#my-element").css('left'));
$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

이 접근 방식은 CSS를 작성하고 이를 스크립트에서 사용하여 후속 CSS 수정 사항이 JavaScript 동작에 반영되도록 합니다.

위 내용은 수직 스크롤을 허용하면서 HTML 요소의 X축 위치를 어떻게 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!