Search results

Close the popup on scroll in JavaScript (ES5) DropDownList control

23 Mar 2023 / 1 minute to read

By using the hidePopup method in DropDownList, you can close the popup on scroll when triggered the windows scroll event.

The following example demonstrate about how to close the popup on scroll.

Copied to clipboard
var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
// initialize DropDownList component
var dropDownListObject = new ej.dropdowns.DropDownList({
    //set the data to dataSource property
    dataSource: sportsData,
    // set placeholder to DropDownList input element
    placeholder: "Select a game"
// render initialized DropDownList
// bind the onscroll event to window
window.onscroll = () => {
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DropDownList</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <link href="//" rel="stylesheet">
<script src="" type="text/javascript"></script>

    <div style="padding: 50px">
        <h4> You can close the opened popup by scroll the page.</h4>
    <div id="container" style="margin:0 auto; width:250px;">
        <input type="text" id="ddlelement">

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>