Scroll Auto when move on popup items
I have following code. I have added overflow-y and max-height css property to the menu item popup. Inside search textbox when type 'a' and press down key the item selection change accordingly. But scroll is not moving. I want the scroll moves auto when moving on popup menu items
#myInputautocomplete-list{
max-height:200px !important;
overflow-y:auto !important;
}
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
Here Plnfkr
javascript html css
asked Nov 22 '18 at 6:30
Muzafar KhanMuzafar Khan
4282822
add a comment |
I have following code. I have added overflow-y and max-height css property to the menu item popup. Inside search textbox when type 'a' and press down key the item selection change accordingly. But scroll is not moving. I want the scroll moves auto when moving on popup menu items
#myInputautocomplete-list{
max-height:200px !important;
overflow-y:auto !important;
}
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
Here Plnfkr
javascript html css
asked Nov 22 '18 at 6:30
Muzafar KhanMuzafar Khan
4282822
add a comment |
I have following code. I have added overflow-y and max-height css property to the menu item popup. Inside search textbox when type 'a' and press down key the item selection change accordingly. But scroll is not moving. I want the scroll moves auto when moving on popup menu items
#myInputautocomplete-list{
max-height:200px !important;
overflow-y:auto !important;
}
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
Here Plnfkr
javascript html css
asked Nov 22 '18 at 6:30
Muzafar KhanMuzafar Khan
4282822
I have following code. I have added overflow-y and max-height css property to the menu item popup. Inside search textbox when type 'a' and press down key the item selection change accordingly. But scroll is not moving. I want the scroll moves auto when moving on popup menu items
#myInputautocomplete-list{
max-height:200px !important;
overflow-y:auto !important;
}
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
Here Plnfkr
javascript html css
javascript html css
asked Nov 22 '18 at 6:30
Muzafar KhanMuzafar Khan
4282822
asked Nov 22 '18 at 6:30
Muzafar KhanMuzafar Khan
4282822
asked Nov 22 '18 at 6:30
Muzafar KhanMuzafar Khan
4282822
asked Nov 22 '18 at 6:30
Muzafar KhanMuzafar Khan
4282822
asked Nov 22 '18 at 6:30
Muzafar KhanMuzafar Khan
4282822
4282822
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can use Element.scrollIntoView() it can help you scroll in this case.
I added these two lines at the end of the function inp.addEventListener("keydown", function(e)
if(x && x[currentFocus])
x[currentFocus].scrollIntoView();
- I forked the Pinfkr here
- Documentation about scrollIntoView can be found here
Update:
It change scroll while we are on first element. It should change the
scroll when item inside popup selection across the popup boundary
I fixed this issue by adding a function to check whether the scrolled element is visible, the scroll move is applied only when the element is not visible inside the dropdown.
// Return true/false if element is visible in relation to a given scrolling container
// Use to see if an element is visible within a scrolling div for example.
function isScrolledElementVisible(o_ele, o_container){
var v_containerTop = o_container.scrollTop;
var v_containerBottom = v_containerTop + o_container.offsetHeight;
var v_elemTop = o_ele.offsetTop;
var v_elemBottom = o_ele.offsetTop + o_ele.offsetHeight;
return ((v_elemBottom >= v_containerTop) && (v_elemTop <= v_containerBottom)
&& (v_elemBottom <= v_containerBottom) && (v_elemTop >= v_containerTop) );
}
for reference I got that function from here
Also if there is another scroll inside the page it also apply to them
also
To solve this issue I'm manually setting the dropdown's scrollTop only instead of using scrollIntoView() so that other scrolls are not effected
var topPos = x[currentFocus].offsetTop;
o_container.scrollTop = topPos;
I learned how to not rely on scrollIntoView() from here
I forked the Pinfkr again it can be found here
answered Nov 22 '18 at 7:15
omar.bromeomar.brome
266
Thanks for replaying but its not a good solution. It change scroll while we are on first element. It should change the scroll when item inside popup selection across the popup boundary. Also if there is another scroll inside the page it also apply to them also
– Muzafar Khan
Nov 22 '18 at 9:56
Welcome, I updated my original solution to solve the 2 issues you mentioned. Please check it again.
– omar.brome
Nov 22 '18 at 17:54
Thanks @omar.brome. Thumb up for you (y)
– Muzafar Khan
Nov 26 '18 at 6:50
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425058%2fscroll-auto-when-move-on-popup-items%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use Element.scrollIntoView() it can help you scroll in this case.
I added these two lines at the end of the function inp.addEventListener("keydown", function(e)
if(x && x[currentFocus])
x[currentFocus].scrollIntoView();
- I forked the Pinfkr here
- Documentation about scrollIntoView can be found here
Update:
It change scroll while we are on first element. It should change the
scroll when item inside popup selection across the popup boundary
I fixed this issue by adding a function to check whether the scrolled element is visible, the scroll move is applied only when the element is not visible inside the dropdown.
// Return true/false if element is visible in relation to a given scrolling container
// Use to see if an element is visible within a scrolling div for example.
function isScrolledElementVisible(o_ele, o_container){
var v_containerTop = o_container.scrollTop;
var v_containerBottom = v_containerTop + o_container.offsetHeight;
var v_elemTop = o_ele.offsetTop;
var v_elemBottom = o_ele.offsetTop + o_ele.offsetHeight;
return ((v_elemBottom >= v_containerTop) && (v_elemTop <= v_containerBottom)
&& (v_elemBottom <= v_containerBottom) && (v_elemTop >= v_containerTop) );
}
for reference I got that function from here
Also if there is another scroll inside the page it also apply to them
also
To solve this issue I'm manually setting the dropdown's scrollTop only instead of using scrollIntoView() so that other scrolls are not effected
var topPos = x[currentFocus].offsetTop;
o_container.scrollTop = topPos;
I learned how to not rely on scrollIntoView() from here
I forked the Pinfkr again it can be found here
answered Nov 22 '18 at 7:15
omar.bromeomar.brome
266
Thanks for replaying but its not a good solution. It change scroll while we are on first element. It should change the scroll when item inside popup selection across the popup boundary. Also if there is another scroll inside the page it also apply to them also
– Muzafar Khan
Nov 22 '18 at 9:56
Welcome, I updated my original solution to solve the 2 issues you mentioned. Please check it again.
– omar.brome
Nov 22 '18 at 17:54
Thanks @omar.brome. Thumb up for you (y)
– Muzafar Khan
Nov 26 '18 at 6:50
add a comment |
You can use Element.scrollIntoView() it can help you scroll in this case.
I added these two lines at the end of the function inp.addEventListener("keydown", function(e)
if(x && x[currentFocus])
x[currentFocus].scrollIntoView();
- I forked the Pinfkr here
- Documentation about scrollIntoView can be found here
Update:
It change scroll while we are on first element. It should change the
scroll when item inside popup selection across the popup boundary
I fixed this issue by adding a function to check whether the scrolled element is visible, the scroll move is applied only when the element is not visible inside the dropdown.
// Return true/false if element is visible in relation to a given scrolling container
// Use to see if an element is visible within a scrolling div for example.
function isScrolledElementVisible(o_ele, o_container){
var v_containerTop = o_container.scrollTop;
var v_containerBottom = v_containerTop + o_container.offsetHeight;
var v_elemTop = o_ele.offsetTop;
var v_elemBottom = o_ele.offsetTop + o_ele.offsetHeight;
return ((v_elemBottom >= v_containerTop) && (v_elemTop <= v_containerBottom)
&& (v_elemBottom <= v_containerBottom) && (v_elemTop >= v_containerTop) );
}
for reference I got that function from here
Also if there is another scroll inside the page it also apply to them
also
To solve this issue I'm manually setting the dropdown's scrollTop only instead of using scrollIntoView() so that other scrolls are not effected
var topPos = x[currentFocus].offsetTop;
o_container.scrollTop = topPos;
I learned how to not rely on scrollIntoView() from here
I forked the Pinfkr again it can be found here
answered Nov 22 '18 at 7:15
omar.bromeomar.brome
266
Thanks for replaying but its not a good solution. It change scroll while we are on first element. It should change the scroll when item inside popup selection across the popup boundary. Also if there is another scroll inside the page it also apply to them also
– Muzafar Khan
Nov 22 '18 at 9:56
Welcome, I updated my original solution to solve the 2 issues you mentioned. Please check it again.
– omar.brome
Nov 22 '18 at 17:54
Thanks @omar.brome. Thumb up for you (y)
– Muzafar Khan
Nov 26 '18 at 6:50
add a comment |
You can use Element.scrollIntoView() it can help you scroll in this case.
I added these two lines at the end of the function inp.addEventListener("keydown", function(e)
if(x && x[currentFocus])
x[currentFocus].scrollIntoView();
- I forked the Pinfkr here
- Documentation about scrollIntoView can be found here
Update:
It change scroll while we are on first element. It should change the
scroll when item inside popup selection across the popup boundary
I fixed this issue by adding a function to check whether the scrolled element is visible, the scroll move is applied only when the element is not visible inside the dropdown.
// Return true/false if element is visible in relation to a given scrolling container
// Use to see if an element is visible within a scrolling div for example.
function isScrolledElementVisible(o_ele, o_container){
var v_containerTop = o_container.scrollTop;
var v_containerBottom = v_containerTop + o_container.offsetHeight;
var v_elemTop = o_ele.offsetTop;
var v_elemBottom = o_ele.offsetTop + o_ele.offsetHeight;
return ((v_elemBottom >= v_containerTop) && (v_elemTop <= v_containerBottom)
&& (v_elemBottom <= v_containerBottom) && (v_elemTop >= v_containerTop) );
}
for reference I got that function from here
Also if there is another scroll inside the page it also apply to them
also
To solve this issue I'm manually setting the dropdown's scrollTop only instead of using scrollIntoView() so that other scrolls are not effected
var topPos = x[currentFocus].offsetTop;
o_container.scrollTop = topPos;
I learned how to not rely on scrollIntoView() from here
I forked the Pinfkr again it can be found here
answered Nov 22 '18 at 7:15
omar.bromeomar.brome
266
You can use Element.scrollIntoView() it can help you scroll in this case.
I added these two lines at the end of the function inp.addEventListener("keydown", function(e)
if(x && x[currentFocus])
x[currentFocus].scrollIntoView();
- I forked the Pinfkr here
- Documentation about scrollIntoView can be found here
Update:
It change scroll while we are on first element. It should change the
scroll when item inside popup selection across the popup boundary
I fixed this issue by adding a function to check whether the scrolled element is visible, the scroll move is applied only when the element is not visible inside the dropdown.
// Return true/false if element is visible in relation to a given scrolling container
// Use to see if an element is visible within a scrolling div for example.
function isScrolledElementVisible(o_ele, o_container){
var v_containerTop = o_container.scrollTop;
var v_containerBottom = v_containerTop + o_container.offsetHeight;
var v_elemTop = o_ele.offsetTop;
var v_elemBottom = o_ele.offsetTop + o_ele.offsetHeight;
return ((v_elemBottom >= v_containerTop) && (v_elemTop <= v_containerBottom)
&& (v_elemBottom <= v_containerBottom) && (v_elemTop >= v_containerTop) );
}
for reference I got that function from here
Also if there is another scroll inside the page it also apply to them
also
To solve this issue I'm manually setting the dropdown's scrollTop only instead of using scrollIntoView() so that other scrolls are not effected
var topPos = x[currentFocus].offsetTop;
o_container.scrollTop = topPos;
I learned how to not rely on scrollIntoView() from here
I forked the Pinfkr again it can be found here
answered Nov 22 '18 at 7:15
omar.bromeomar.brome
266
edited Nov 22 '18 at 17:53
answered Nov 22 '18 at 7:15
omar.bromeomar.brome
266
answered Nov 22 '18 at 7:15
omar.bromeomar.brome
266
answered Nov 22 '18 at 7:15
omar.bromeomar.brome
266
266
Thanks for replaying but its not a good solution. It change scroll while we are on first element. It should change the scroll when item inside popup selection across the popup boundary. Also if there is another scroll inside the page it also apply to them also
– Muzafar Khan
Nov 22 '18 at 9:56
Welcome, I updated my original solution to solve the 2 issues you mentioned. Please check it again.
– omar.brome
Nov 22 '18 at 17:54
Thanks @omar.brome. Thumb up for you (y)
– Muzafar Khan
Nov 26 '18 at 6:50
add a comment |
Thanks for replaying but its not a good solution. It change scroll while we are on first element. It should change the scroll when item inside popup selection across the popup boundary. Also if there is another scroll inside the page it also apply to them also
– Muzafar Khan
Nov 22 '18 at 9:56
Welcome, I updated my original solution to solve the 2 issues you mentioned. Please check it again.
– omar.brome
Nov 22 '18 at 17:54
Thanks @omar.brome. Thumb up for you (y)
– Muzafar Khan
Nov 26 '18 at 6:50
Thanks for replaying but its not a good solution. It change scroll while we are on first element. It should change the scroll when item inside popup selection across the popup boundary. Also if there is another scroll inside the page it also apply to them also
– Muzafar Khan
Nov 22 '18 at 9:56
Thanks for replaying but its not a good solution. It change scroll while we are on first element. It should change the scroll when item inside popup selection across the popup boundary. Also if there is another scroll inside the page it also apply to them also
– Muzafar Khan
Nov 22 '18 at 9:56
Welcome, I updated my original solution to solve the 2 issues you mentioned. Please check it again.
– omar.brome
Nov 22 '18 at 17:54
Welcome, I updated my original solution to solve the 2 issues you mentioned. Please check it again.
– omar.brome
Nov 22 '18 at 17:54
Thanks @omar.brome. Thumb up for you (y)
– Muzafar Khan
Nov 26 '18 at 6:50
Thanks @omar.brome. Thumb up for you (y)
– Muzafar Khan
Nov 26 '18 at 6:50
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425058%2fscroll-auto-when-move-on-popup-items%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
