The scollPanel component provides customizable scroll bars instead of the browser's scrolls.
A basic definition for a scroll panel with a width of 500 pixels and a height of 500 pixels would be as follows:
<p:scrollPanel style="width:500px;height:500px">
<p:dataGrid var="car" value="#{scrollPanelController.cars}"
columns="2">
<p:panel header="#{car.name}" style="text-align:center">
<p:graphicImage value=
"/resources/images/autocomplete/#{car.name}.png" />
</p:panel>
</p:dataGrid>
</p:scrollPanel>This will render a list of car models within a data grid. The visual size of the grid will be limited to a 500 by 500 pixels view, and the content can be scrollable horizontally and vertically. By default, customized scrollbars will be rendered as shown in the following screenshot:
