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

由 choi donghee

2015年 07月 30日 00:10 Korean(韩语) 9 回复

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

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

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

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

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

查看选择的答案

响应

9 回复

pius lee

2015年 07月 30日 02:41

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 pius lee

2015年 07月 30日 18:36

감사합니다!!!

回复此主题
标记为答案
- 报告
- 编辑
- 删除

choi donghee pius lee

2015年 07月 30日 19:25

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

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

回复此主题
标记为答案
- 报告
- 编辑
- 删除

pius lee choi donghee

2015年 07月 31日 02:17

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();
		}
	});
});