Scroll programatically to input with focus

Questions
1

Hello,

I would like to scroll programmatically to an input that has failed in its validation. The page-content can be quite lengthy

//validate input name
if (!($('#my_input_value').val()))
{
	
	//set focus
	app.input.focus('#my_input_value');
	
	//scroll to input
	<! -- Place code here -->
	
	//alert user
	app.dialog.alert('Please enter a value.');
	
	return;
	
}

I can see there is .scrollTop that is used but I can’t quite figure out how to use it.

Any pointers will be appreciated.

2

var inputVal = $(’#inputVal’);
if(inputVal.val()){
// alert / toast
app.dialog.alert(‘Your error message’,() =>{
inputVal.focus();
})
}else if(other_validation){}

3
scrollTop() Get scrollTop position of element
.scrollTop(position, duration, callback) Set scrollTop “position” with animation during “duration” (in ms). Scroll top position will be set immediately if duration is not specified. If you have specified “callback” function, then it will be executed after scrolling completed

So get the top pos of the element. And then scrolTop to it

Const pos = $$(myEl).scrollTop()
$$(pageContainer).scrollTop(pod)
4

@pvtallulah

This works well for the input elements that are at the top of the page.

How about those that are centered on the page?

Is there a way to get their position on the page?

5

There is a app.input.scrollIntoView method

https://framework7.io/docs/inputs.html#input-app-methods

1 Like