Форум

MininAS · #1 (**permalink**) 15.10.2015, 22:09

Здравствуйте!
Вопрос к знатокам:

<div id = 'one'>
 <div id = 'two'>
 <> ... список ... </>
 </div>
</div>

Блок первый ограничен в размерах.
Блок второй носит свойство overflow:auto; т.е. с прокруткой.
Вопрос: как отобразить мне необходимую строку списка (ну если она в середине или конце) при заходе на страницу.

Lemme · #2 (**permalink**) 15.10.2015, 22:40

https://developer.mozilla.org/en-US/...ment/scrollTop
https://developer.mozilla.org/en-US/...dingClientRect

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#two {
			width: 100%;
			height: 150px;
			overflow: auto;
		}
		li {
			display: block;
			height: 150px;
			color: #fff;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="two">
   	 	<ul>
     	   		<li style="background-color: tomato">1</li>
     	   		<li style="background-color: purple; height: 500px;">2</li>
     	   		<li style="background-color: blue">3</li>
   	 	</ul>
	</div>
	<script>
		function showItem(x) {
			var two = document.getElementById('two'),
		        item = document.querySelectorAll('#two ul li')[x-1];
		    
		    if (!item) {
		    	return false;
		    }
		    
		    var y = item.getBoundingClientRect().y - two.getBoundingClientRect().y;
		    
		    two.scrollTop = y;
		}

		showItem(2);
	</script>
</body>
</html>

рони · #3 (**permalink**) 15.10.2015, 23:01

Lemme,

Lemme · #4 (**permalink**) 15.10.2015, 23:03

рони, ?

изменил слегка

рони · #5 (**permalink**) 15.10.2015, 23:04

Lemme,
интересно что делает ваш код?

Lemme · #6 (**permalink**) 15.10.2015, 23:08

рони, перематывает на необходимый li элемент. А что должно быть?

рони · #7 (**permalink**) 15.10.2015, 23:10

Сообщение от Lemme

перематывает на необходимый li элемент

врятли

Lemme · #8 (**permalink**) 15.10.2015, 23:11

рони, эм, почему вряд ли то?=)

рони · #9 (**permalink**) 15.10.2015, 23:15

Lemme,
вы хотите сказать что код рабочий а не бред?

Lemme · #10 (**permalink**) 15.10.2015, 23:16

рони, код рабочий, но на счет бреда - не уверен, ибо я все таки новичок =)

Был бы рад, если бы вы объяснили - почему бред.

Форум

Справочник

Discord чат

Курсы javascript