> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트에서 스크롤 막대 높이를 설정하는 방법

자바스크립트에서 스크롤 막대 높이를 설정하는 방법

藏色散人
풀어 주다: 2023-01-05 16:09:36
원래의
5491명이 탐색했습니다.

JavaScript에서 스크롤 막대 높이를 설정하는 방법: 먼저 현재 선택된 li 앞의 노드 높이를 가져온 다음 ul 높이의 절반을 빼고 이를 ul의 scrollTop으로 설정하고 스크롤을 설정합니다. 중간 위치에 있는 바.

자바스크립트에서 스크롤 막대 높이를 설정하는 방법

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript는 스크롤 막대 높이를 동적으로 설정합니다

작업에서 직면하는 상황은 다음과 같습니다: 많은 li 태그를 포함하는 ul 태그, 그 중 하나는 선택된

  • ;.

    ul에 아래 ul 스타일과 같이 높이가 설정되어 있고 li 하위 태그가 많으면 선택한 li가 스크롤 막대 아래로 잠기게 됩니다.

    <ul id="ul_module" style="height:180px; overflow-y:scroll;">
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>000</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
        <li>777</li>
        <li>888</li>
        <li class="li-on">999</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    로그인 후 복사

    해야 할 일은 선택한 li 태그를 가시 영역으로 이동하는 것이며 js를 통해 스크롤 막대의 높이를 동적으로 설정할 수 있습니다.

    자세한 내용은 다음과 같습니다. 현재 선택된 li 앞의 노드 높이를 구한 다음 ul 높이의 절반을 빼서 ul의 scrollTop으로 설정합니다. 기본적으로 스크롤 막대를 가운데에 설정할 수 있습니다. 위치.

    var ul_module = $(&#39;#ul_module&#39;);
    var ul_height = ul_module.height();
    var seleted_li = ul_module.find(&#39;.li-on&#39;);
    if(seleted_li.length) {
        var height = seleted_li.height();
        var prevCount = seleted_li.prevAll().length;
        ul_module.scrollTop(height * prevCount - ul_height/2);
    }
    로그인 후 복사

    【추천 학습: javascript 고급 튜토리얼

  • 위 내용은 자바스크립트에서 스크롤 막대 높이를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿