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)

MininAS 15.10.2015 22:09
Поиск и отображение потомка в блоке с прокруткой
 
Здравствуйте!
Вопрос к знатокам:
<div id = 'one'>
 <div id = 'two'>
 <> ... список ... </>
 </div>
</div>

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

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

рони 15.10.2015 23:01
Lemme,
:blink:

Lemme 15.10.2015 23:03
рони, ?:D

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

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

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

рони 15.10.2015 23:10
Цитата:
Сообщение от Lemme
перематывает на необходимый li элемент
врятли :-/

Lemme 15.10.2015 23:11
рони, эм, почему вряд ли то?=)

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

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

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

рони 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,
:) ок

MininAS 16.10.2015 00:57
Ребята спасибо! Можно было просто назвать метод:scrollIntoView().

Всем по плюсику )))!


Часовой пояс GMT +3, время: 05:31.