CODEWITHSUNDEEP
jqueryhtmlcss
JohnV
JohnV

Reputation: 21

bad scroll behavior on change of focus from one element to the next

Can someone please help, you can find the link here codepen.

I am a building a search bar widget where you can navigate from the input tag to the search results, and within results, which are a series of divs. The navigation is implemented in jquery where the focus is taken or given to a div triggered by up/down arrow keys.

The divs are within a container div.s_dropdwn which has a max-height:100px and overflow-y:scroll.

The navigation works but the scrolling that it generates is awful. If you start at the input and press down arrow key you'll see what I mean. The div which is given focus disappears do to the scrolling.

I want it so that starting at the input you navigate down to the 5th div before scrolling occurs.

		$('.move').keydown(function(e){

			if (e.keyCode == 40) {
					
				
				$(".move:focus").attr('tabindex','-1')
				$(".move:focus").next().attr('tabindex','0').focus();

			}
			
			if (e.keyCode == 38) {    

			    $(".move:focus").attr('tabindex','-1')
				$(".move:focus").prev().attr('tabindex','0').focus();
				
			}

				
		});	
			

		$('.s_dropdwn > .move.first').keydown(function(e){
		
			if (e.keyCode == 38) { 
			
			    $(".move.first:focus").attr('tabindex','-1')
				$("input").focus()
			}
			
		
		});
			
			
		$("input").keydown(function(e){

			if(e.keyCode === 40){
				$('.s_dropdwn > :first-child').attr('tabindex','0').focus();
			}
			
			
		});	
			
			
*{
	margin:0px;
	padding:0px;
}

div.s_container{

	width:40%;
	position:relative;
	margin:auto;							/* horizontally center the div*/
	margin-top:10%;                        /*margin in percent is based on width of container .parent1*/
	background-color:#becee8;
	line-height:62px;

}



.con_inpt{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	line-height:normal;
	
	border:white solid 1px;
	margin-left:5px;
	margin-bottom:3px;
	width: 200px;

}

.s_dropdwn{

	position:absolute;
	top:100%;
	max-height:150px;
	width:100%;
	background-color:#becee8;
	margin-top:2px;
	overflow-y:scroll;
}

.s_dropdwn > div:focus{

	outline:none;
	background-color:black;
}

.s_dropdwn > div{
	display:block;
	width:100%;
	
	height:30px;
	line-height:30px;
	
	border-top: solid 1px white;
	font-size:0.5rem;
	font-family: Arial,sans-serif;
	font-weight:600;
	color:white;
	
	box-sizing: border-box;        
    padding-left: 10px;           /*because of box-sizing padding will be inside the div not outside*/
	cursor:pointer;
	transition: background-color 0.4s;
}


input#search{

	display:inline-block;
	border:none;
	background:none;
	outline:none;
	
	width:80%;	
	padding:7px 3px;
	font-size:0.8rem;
	font-weight:600;
	color:white;
}


input#search::placeholder{

	font-size:0.8rem;
	font-weight:600;
	color:white

}
<!DOCTYPE html>
<!-- saved from url=(0048)file:///C:/Users/jvalica/Downloads/d3%20(2).html -->
<html lang="en">
<head>
    <meta charset="utf-8">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>


</head>

<body>

	
<div id="parent1" style="position:relative; width:80%;margin:auto; height:300px;border: 1px solid #e4f2f5; background-color: #e4f2f5;">



	<div class="s_container">
		<div class="con_inpt">
			<input id="search" type="text" class="" name="" placeholder="Search" autocomplete="off">
			
			
			<div class="s_dropdwn">
				
				<div class="move first">
					AAA
				</div>
				<div class="move">
					BBB
				</div>
				<div class="move">
					CCC
				</div>
				<div class="move">
					DDD
				</div>
				<div class="move">
					EEE
				</div>
				<div class="move">
					FFF
				</div>
				<div class="move">
					GGG
				</div>
				<div class="move">
					HHH
				</div>
			</div>
		</div>	
	</div>
</div>
</body>
</html>

Upvotes: 1

Views: 1408

Answers (1)

JohnV
JohnV

Reputation: 21

I figured out the problem, for anyone with similar issue in the future. The problem is that the browsers scroll behavior was interacting with my scroll behavior based on change of focus. The solution is to turn off the browsers scroll behavior. You can due this with the following code.

	window.addEventListener("keydown", function(e) {
		// space and arrow keys
		if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
			e.preventDefault();
		}
	}, false);

Upvotes: 1

Related Questions