Scroll mode added to Categories and Producers widget
The platform now features a new horizontal scroll mode for the "Categories" and "Producers" widgets. The mode is activated automatically if the widget has the :scroll-9999 parameter, which sets the maximum screen width for enabling the scroll (if the actual screen width is smaller, the mode is activated).
If the screen width is smaller than specified:
- The widget automatically switches to horizontal scroll mode;
- Block widths for categories/producers are calculated including padding and margin across all container levels;
- Drag-scroll works on desktop;
- If the second argument is specified in the parameter (:scroll-9999x3), pagination with the specified number of dots is enabled (3 in this example).
If the screen width is larger than specified:
- Scroll mode is completely disabled;
- The layout returns to standard display;
- Pagination (dots) is removed.
How to enable Scroll mode
- In the categories or producers widget generator, specify the parameter:
:scroll-9999— the screen width below which scrolling is enabled. - If needed, add the number of pagination dots using the second parameter:
:scroll-9999x3— the number "3" enables pagination with three dots. - The script activates automatically on page load.
HTML Example (generated automatically)
<div class="hotengine-categories-list"
data-scroll-width="9999"
data-scroll-pagination="3">
...
</div>
After that, scrolling and pagination work automatically depending on the screen width and parameters set in the widget.
