Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Поиск и отображение потомка в блоке с прокруткой (https://javascript.ru/forum/misc/58894-poisk-i-otobrazhenie-potomka-v-bloke-s-prokrutkojj.html)

рони 15.10.2015 23:22
Цитата:
Сообщение от Lemme
getBoundingClientRect().y
это что?
наверно надо сначала показать блок two потом этот блок проскролить к нужному li

Lemme 15.10.2015 23:24
Цитата:
наверно надо сначала показать блок two.
предполагается, что блок two видим. Поэтому скролил его

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

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

рони 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.10.2015 23:37
рони, позиция элемента - аля offsetTop
Цитата:
scrollIntoView()
Спасибо, про этот метод не знал, может когда-нибудь пригодится ;)

рони 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 15.10.2015 23:50
рони, ну, ТС не уточнил, на счет видимости блока two, поэтому я не скроллил window.

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

Lemme 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 }

рони 16.10.2015 00:31
Lemme,
:) ок


Часовой пояс GMT +3, время: 19:58.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице