From: SassNinja Date: Mon, 11 Mar 2019 17:53:24 +0000 (+0100) Subject: docs: add off-canvas scrollbox X-Git-Tag: v6.6.0~3^2~14^2~3 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=dfe661bfa852c79d9cc5fedeb21faaa69ad88513;p=thirdparty%2Ffoundation%2Ffoundation-sites.git docs: add off-canvas scrollbox --- diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md index 13a55d6d5..9ac306b72 100644 --- a/docs/pages/off-canvas.md +++ b/docs/pages/off-canvas.md @@ -405,6 +405,81 @@ Advanced off-canvas users may use the new `contentId` option to bind an element --- +## Off-canvas Scrollbox + +Placing scrollable elements within an off-canvas if `contentScroll: false` is tricky because on touch devices it may become difficult to scroll those elements due to stopped event propagation. There's no continous touch move possible. + +However you can still achieve this when you add `data-off-canvas-scrollbox` to the scrollable elements. +Once you've reached the start/end of a scrollbox (while touch moving) the off-canvas will continue scrolling the off-cannvas element. You can optionally use a wrapper with `data-off-canvas-scrollbox-outer` which gets scrolled instead of the off-canvas element. This is useful when you nest your scrollable elements into other scrollable elements or work with fix heights. + +```html_example +
+
+
+
+
+ You have to view this example on a touch device or use e.g. the chrome dev tools with touch emulation. +
+ +
+
+
+
+
+

The 1st list supports continuous touchmove

+
    +
  • bullet 01
    • +
  • bullet 02
    • +
  • bullet 03
    • +
  • bullet 04
    • +
  • bullet 05
    • +
  • bullet 06
    • +
  • bullet 07
    • +
  • bullet 08
    • +
  • bullet 09
    • +
  • bullet 10
    • +
+
+
+

The 2nd list doesn't support continuous touchmove

+
    +
  • bullet 01
    • +
  • bullet 02
    • +
  • bullet 03
    • +
  • bullet 04
    • +
  • bullet 05
    • +
  • bullet 06
    • +
  • bullet 07
    • +
  • bullet 08
    • +
  • bullet 09
    • +
  • bullet 10
    • +
+
+
+

The 3rd list is regular content

+
    +
  • bullet 01
    • +
  • bullet 02
    • +
  • bullet 03
    • +
  • bullet 04
    • +
  • bullet 05
    • +
  • bullet 06
    • +
  • bullet 07
    • +
  • bullet 08
    • +
  • bullet 09
    • +
  • bullet 10
    • +
+
+
+
+
+
+``` + +--- + ## Off-canvas Sizes In v6.4.2 the type of the off-canvas size variables has changed from number to map. This lets you define breakpoint specific sizes instead of one value for all.