Languages

Menu
Sites
Language
html5 <ul> <li> 라디오 리스트에서 선택한 값부터 보이게하는법

타이젠 웨어러블 앱 개발중에

html5 리스트뷰에서 라디오버튼 목록들이 쭈욱 있는데요.

선택된 값이 위쪽에서 보였으면 좋겠습니다.

안드로이드에서 setSelection처럼요..

 

리스트가 많은데 선택된 값까지 가려면 list를 내려야하니 불편하네요 ㅜㅜ 어떻게 해결할수있나요?

View Selected Answer
List

Responses

9 Replies
Mark as answer
pius lee

scrollIntoView를 쓰시면 됩니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style>li {background-color:#bbbb22; border:1px solid #000; height:100px;}</style>
</head>

<body>
<ul>
    <li><label for="nx1">foobar1</label><input type="radio" name="nx" value="1"/></li>
    <li><label for="nx2">foobar2</label><input type="radio" name="nx" value="2"/></li>
    <li><label for="nx3">foobar3</label><input type="radio" name="nx" value="3"/></li>
    <li><label for="nx4">foobar4</label><input type="radio" name="nx" value="4"/></li>
    <li><label for="nx5">foobar5</label><input type="radio" name="nx" value="5"/></li>
    <li><label for="nx6">foobar6</label><input type="radio" name="nx" value="6"/></li>
    <li><label for="nx7">foobar7</label><input type="radio" name="nx" value="7"/></li>
    <li><label for="nx8">foobar8</label><input type="radio" name="nx" value="8"/></li>
    <li><label for="nx9">foobar9</label><input type="radio" name="nx" value="9"/></li>
    <li><label for="nx10">foobar10</label><input type="radio" name="nx" value="10"/></li>
</ul>

<script>
Array.prototype.forEach.call(document.getElementsByName('nx'),
    	function(x) { x.addEventListener('change', function(ev) { ev.target.scrollIntoView() }); });
</script>
</body>
</html>

 

choi donghee

감사합니다!!!

choi donghee

근데 'change'로 하니 리스트뷰안에서 변경될때만 scroll이 되는데,

리스트뷰를 처음에 보여줄때 scroll하려면 어떻게 해야하나요?

pius lee

window loading 이 끝나자마자 원하시는 곳으로 scroll 하시면 됩니다.

예를 들어 제가 올린 위의 소스에서 value가 6인 input으로 scroll 하려면 다음과 같은 스크립트가 추가되면 됩니다.

window.addEventListener("load", function scrollermover(){
    window.removeEventListener("load", scrollermover);
	Array.prototype.forEach.call(document.getElementsByName('nx'), function(x) {
		if (parseInt(x.value) === 6) {
			x.scrollIntoView();
		}
	});
});

 

choi donghee

감사합니다!! 잘 참고하겠습니다

choi donghee

질문 하나 더 드리고 싶습니다~!

위와 같이 쓸 경우 포커스가 항상 아래에 가 있는데요.

포커스가 가운데로 오게 하려면 어떻게 해야하나요?

daniel kim

안녕하세요.

아래와 같이, 바로 앞 node로 가도록 하면 되지 않을까 합니다.

   if (parseInt(x.value) === 6) {    
      x.previousSibling.scrollIntoView();
   }
  

daniel kim

center로 보내는 method가 있네요..

  if (parseInt(x.value) === 6) {    
        x.scrollIntoViewIfNeeded(true);
  }

아래 링크 참조하시면 될 것 같습니다..

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded

 

choi donghee

답변 감사합니다~ if 넣으니 되네요 ㅎㅎ