Форум

рони · #11 (**permalink**) 15.10.2015, 23:22

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

getBoundingClientRect().y

это что?
наверно надо сначала показать блок two потом этот блок проскролить к нужному li

Lemme · #12 (**permalink**) 15.10.2015, 23:24

Цитата:

наверно надо сначала показать блок two.

предполагается, что блок two видим. Поэтому скролил его

p.s Из за этого Вы посчитали код бредом?

рони · #13 (**permalink**) 15.10.2015, 23:31

Lemme,
я непонимаю как вы его скролите и что такое getBoundingClientRect().y

рони · #14 (**permalink**) 15.10.2015, 23:31

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        body{
          height: 1500px;
        }

		#two {
		    margin-top: 445px;
			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">2</li>
     	   		<li style="background-color: blue">3</li>
   	 	</ul>
	</div>
	<script>
		function showItem(x) {
			var two = document.getElementById('two'),
		        item = two.querySelectorAll('li')[x-1];
                item && item.scrollIntoView()
		}
		showItem(3);
	</script>
</body>
</html>

Lemme · #15 (**permalink**) 15.10.2015, 23:37

рони, позиция элемента - аля offsetTop

Цитата:

scrollIntoView()

Спасибо, про этот метод не знал, может когда-нибудь пригодится

рони · #16 (**permalink**) 15.10.2015, 23:45

или так

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        body{
          height: 1500px;
        }

		#two {
		
		    margin-top: 445px;
			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">2</li>
     	   		<li style="background-color: blue">3</li>
   	 	</ul>
	</div>
	<script>
		function showItem(x) {
			var two = document.getElementById('two'),
		        item = two.querySelectorAll('li')[x-1];
                window.scrollTo(0,two.getBoundingClientRect().top)
                two.scrollTop =  item.getBoundingClientRect().top
		}
	  window.onload = function() {
      showItem(3);
}
	</script>
</body>
</html>

Lemme · #17 (**permalink**) 15.10.2015, 23:50

рони, ну, ТС не уточнил, на счет видимости блока two, поэтому я не скроллил window.

рони · #18 (**permalink**) 15.10.2015, 23:54

Lemme,
вы так и не ответили что такое что такое getBoundingClientRect().y , на всякий случай: оба ваших варианта у меня не работают.

Lemme · #19 (**permalink**) 16.10.2015, 00:05

Цитата:

вы так и не ответили что такое что такое getBoundingClientRect().y

Ответил.

Цитата:

рони, позиция элемента - аля offsetTop

Цитата:

у меня не работают

Ага, проверил в хроме, там нет свойст x, y.... А в лисе есть.

DOMRect { x: 48, y: 174, width: 608, height: 500, top: 174, right: 656, bottom: 674, left: 48 }

рони · #20 (**permalink**) 16.10.2015, 00:31

Lemme,

ок

Форум

Справочник

Discord чат

Курсы javascript