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 = $('#ul_module'); var ul_height = ul_module.height(); var seleted_li = ul_module.find('.li-on'); 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!