Scrolling

This demo shows two implementations of scrolling in the Popup component.

When you click the first Show Popup button, a Popup with a native scrollbar appears. The component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.

A click on the second Show Popup button also displays a Popup with a scrollbar, but this scrollbar belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.

To implement the second solution, follow the steps below:

Wrap the content in the ScrollView component and place it in the Popup container.
Set the height and width of the ScrollView to 100% of the popup content area.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Backend API

Copy to CodePen

Apply

Reset

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-sanitize.min.js"></script> <script> (function () { try { window.angular.module('ngSanitize'); } catch (e) { return false; } return true; })() || document.write(decodeURIComponent('%3Cscript src="js/angular-sanitize.min.js"%3E%3C\/script%3E')) </script> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div dx-popup="popupOptions"> <div dx-scroll-view="scrollViewOptions"> <img src="images/Popup-Scrolling-Image.jpg" class="center" /> <div id="textBlock" ng-bind-html="content"></div> </div> </div> </div> </body> </html>

#textBlock { padding-left: 20px; padding-right: 20px; line-height: 1.6em; } .center { display: block; margin-left: auto; margin-right: auto; padding-top: 20px; width: 300px; }

const longText = "The <b>ScrollView</b> allows users to scroll its content vertically. To enable horizontal and vertical scrolling, set the <b>direction</b> option to <i>\"both\"</i>. Horizontal scrolling is available only if the content is wider than the <b>ScrollView</b>. Otherwise, the content adapts to the widget's width.<br/><br/>The <b>ScrollView</b> uses native scrolling on most platforms, except desktops. To use it on all platforms, assign <b>true</b> to the <b>useNative</b> option. If you assign <b>false</b>, scrolling is simulated on all platforms.";