Scroll web component <cq-scroll>.
The cq-scroll web component creates a scrollable container, which resizes itself when the screen is resized. If CIQ.UI.scrollbarStyling is initialized to a scrollbar implementation (such as PerfectScrollbar), the scrollbar implementation replaces the native scrollbar.
Keyboard control
When selected with tab key navigation and activated with Return/Enter, this component has the following internal controls:
- Up/Down arrow — Move selection between internal cq-item elements.
- Left/Right arrow — Select a control within a selected cq-item element, such as
Remove and Edit buttons. Child elements must have the attribute
keyboard-selectable-childset to "true" to be selectable with these keys.
Attributes
- cq-no-claim — Do not apply any keystroke capturing
- cq-no-maximize — Do not automatically maximize the height (but keep it showing on screen)
- cq-no-resize — Do not apply any sizing logic
Use this.dataPortion to dynamically inject items into the list.
- Since:
-
- 6.1.0 Added
cq-no-claimattribute. - 8.3.0 Enabled internal keyboard navigation and selection.
- 6.1.0 Added
Example
<cq-lookup-results>
<cq-lookup-filters cq-no-close>
<cq-filter class="true">ALL</cq-filter>
<cq-filter>STOCKS</cq-filter>
<cq-filter>FX</cq-filter>
<cq-filter>INDEXES</cq-filter>
<cq-filter>FUNDS</cq-filter>
<cq-filter>FUTURES</cq-filter>
</cq-lookup-filters>
<cq-scroll></cq-scroll>
</cq-lookup-results>Methods
-
focused()
-
Returns the focused element or null. An item is focused if it has attribute cq-focused.
Returns:
The element or null
- Type
- HTMLElement
-
focusItem(item)
-
Overrides focusItem in CIQ.UI.BaseComponent.
Scrolls to an item and gives the item focus.
Parameters:
Name Type Description itemHTMLElement The element to scroll to and focus. Must be a child of this component.
- Since:
-
8.3.0
-
scrollToElement(item)
-
Scrolls to an element.
Parameters:
Name Type Description itemHTMLElement The element to scroll to. Must be a child of this component.