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.
import { DropDownList } from '@syncfusion/ej2-dropdowns';
// define the array of data
let sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
// initialize DropDownList component
let dropDownListObject: DropDownList = new DropDownList({
//set the data to dataSource property
dataSource: sportsData,
// set placeholder to DropDownList input element
placeholder: "Select a game"
});
// render initialized DropDownList
dropDownListObject.appendTo('#ddlelement');
// bind the onscroll event to window
window.onscroll = () => {
dropDownListObject.hidePopup();
}<!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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div style ='padding: 50px'>
<h4> You can close the opened popup by scroll the page.</h4>
</div>
<div id='container' style="margin:0 auto; width:250px;">
<br>
<input type="text" id='ddlelement' />
</div>
</body>
</html>