jQuery를 사용하여 컨텐츠를 수평으로 고정 Div 스크롤하는 방법은 무엇입니까?

jQuery를 사용하여 콘텐츠가 있는 가로 스크롤 Div 수정

질문:

어떻게 할 수 있나요? 콘텐츠와 함께 가로로 스크롤되도록 고정 div의 위치를 ​​설정하시겠습니까?

상세 설명:

CSS 클래스 "scroll_fixed"가 있는 div 요소가 처음에 설정됩니다. 절대적인 위치로. 그러나 div가 페이지 상단에 도달하면 jQuery 코드는 위치를 고정하기 위해 "fixed" 클래스를 추가합니다. 이 설정은 세로 스크롤에 적합하지만 가로 스크롤은 콘텐츠 오른쪽에 문제가 발생합니다.

목표:

다음과 유사하게 콘텐츠와 함께 div를 가로로 스크롤하도록 합니다. 제공된 예의 두 번째 상자입니다.

답변:

div의 가로 스크롤을 달성하기 위해 솔루션은 요소의 위치를 ​​고정한 상태로 유지하지만 왼쪽 속성을 조작합니다.

<code class="javascript">var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Check if the element should be fixed based on vertical scroll
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the element's left position based on horizontal scroll
    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});</code>

이렇게 하면 div가 수직으로 고정된 위치를 유지하면서 페이지 콘텐츠와 함께 수평으로 스크롤됩니다.

위 내용은 jQuery를 사용하여 컨텐츠를 수평으로 고정 Div 스크롤하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!