Автоматический скроллинг к центру блока по вертикали
Добрый день.
На странице есть два списка. Как сделать, чтобы при загрузке страницы пункты списков с ID устанавливались по центру видимой части блоков. Вот код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тест скроллинга</title> <style type="text/css"> .menu { list-style:none; border: 2px solid black; overflow:auto; height:100px; } </style> </head> <body> <ul class="menu"> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li id="this_centre1" style="color:red">Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li> </ul> <ul class="menu"> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li> <li id="this_centre2" style="color:red">Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li> </ul> </body> </html> |
Вот, покопался в инете (в том числе и на данном сайте) и сделал сам. Но по-моему код какой-то фиговый получился. Раздутый. Но я JavaScript не силен, поэтому подскажите, может можно как-то попроще все организовать? Заранее благодарю!
Код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тест скроллинга</title> <style type="text/css"> .menu { list-style:none; border: 2px solid black; overflow:auto; height:100px; } </style> <script type="text/javascript"> function Offset_Top(element) { var offsetTop = 0; do { offsetTop += element.offsetTop; } while (element = element.offsetParent); return offsetTop; } function myscroll(){ var this_centre1=document.getElementById("this_centre1"); var this_centre2=document.getElementById("this_centre2"); if (this_centre1 == null || this_centre2 == null) return true; var menu1=this_centre1.parentNode; var menu2=this_centre2.parentNode; var rasst1=Offset_Top(this_centre1)-Offset_Top(menu1); var rasst2=Offset_Top(this_centre2)-Offset_Top(menu2); if (rasst1 < menu1.scrollHeight - (menu1.offsetHeight >> 1)) menu1.scrollTop=rasst1-(menu1.offsetHeight >> 1); else menu1.scrollTop=menu1.scrollHeight - menu1.offsetHeight; if (rasst2 < menu2.scrollHeight - (menu2.offsetHeight >> 1)) menu2.scrollTop=rasst2-(menu2.offsetHeight >> 1); else menu2.scrollTop=menu2.scrollHeight - menu2.offsetHeight; } window.onload=myscroll; </script> </head> <body> <ul class="menu"> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li id="this_centre1" style="color:red">Пункт1</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li> </ul> <ul class="menu"> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li> <li id="this_centre2" style="color:red">Пункт1</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li> </ul> </body> </html> |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тест скроллинга</title> <style type="text/css"> .menu { list-style:none; padding:0; border: 1px solid black; overflow:auto; height:300px; margin:0 0 2em 0; } </style> <script type="text/javascript"> window.onload = function(){ var prev = function(elem){ do{ elem = elem.previousSibling; }while (elem && elem.nodeType != 1); return elem; }, scrollToElement = function(theElement){ var selectedPosY = 0, menu = theElement.parentNode, elH = theElement.offsetHeight; while(theElement != null){ selectedPosY += theElement.offsetHeight; theElement = prev(theElement); } menu.scrollTop = selectedPosY - menu.offsetHeight/2 - elH/2; }; scrollToElement(document.getElementById("this_centre1")); scrollToElement(document.getElementById("this_centre2")); } </script> </head> <body> <ul class="menu"> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li id="this_centre1" style="color:red">Пункт1</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li> </ul> <ul class="menu"> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li> <li id="this_centre2" style="color:red">Пункт1</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li><li>Пункт</li><li>Пункт</li> <li>Пункт</li> </ul> </body> </html> |
Jurasmi, спасибо большое за помощь, все работает. Щас буду разбираться. :)
|
Часовой пояс GMT +3, время: 09:03. |