Summary

Scroll Spy and Tabs are great ways of organising information inside your documents. We made them flexible and easy to be included in the documents. Any Docaroo component, including importing esternal content or rich content ones, can be used to populate scroll spies and tabs.

Scroll spy

The content of a scroll spy consist in a number of markdown files placed anywhere inside your doc-contents folder. Our recommendation is to place this content either in partials sub-folder (as it is in the following example), or in a folder created for the document in which the scroll spy is used. For the following example we use a scroll spy content stored in the following structure:

📁 partials/
├── 📁 card-gallery-demo
│   ├── 📄 c1.md
│   ├── 📄 c2.md
│   ├── 📄 c3.md
│   └── 📄 c4.md
├── 📁 errors-and-warnings
│   └── 📄 wrong-link-btn-type.md
├── 📁 external-content-demo
│   ├── 📄 alert-content.md
│   ├── 📄 card-content-aside-demo.md
│   ├── 📄 card-content-demo.md
│   ├── 📄 card-gallery-c1.md
│   ├── 📄 card-gallery-c2.md
│   ├── 📄 card-gallery-c3.md
│   ├── 📄 card-gallery-c4.md
│   ├── 📄 ec1.md
│   ├── 📄 ec2.md
│   └── 📄 faq-demo.md
├── 📁 media
│   ├── 📄 c1-tr-1.png
│   ├── 📄 c1-tr-2.png
│   ├── 📄 doc-site-s.png
│   ├── 📄 doc-site-tr.png
│   ├── 📄 girl-1.png
│   ├── 📄 home-600.png
│   ├── 📄 home-s.png
│   ├── 📄 human-600.png
│   ├── 📄 joy-s.png
│   ├── 📄 man-s.png
│   ├── 📄 man-thinking.png
│   ├── 📄 smile-600.png
│   └── 📄 w2s-gr-s.png
└── 📁 scroll-spy
    ├── 📁 demo-combined-scroll-spy
    │   ├── 📄 item1.md
    │   └── 📄 item2.md
    └── 📁 demo-scroll-spy
        ├── 📄 item1.md
        ├── 📄 item2.md
        ├── 📄 item3.md
        ├── 📄 item4.md
        └── 📄 item5.md

The scroll spy is simply added to document like this:

{% include elements/scroll-spy.html
    source="partials/scroll-spy/demo-scroll-spy" 
    h="400px" 
    btn="true" 
    btnType="primary" 
    outline="false" 
    separators="true" 
    spyBorder="fale"
%}

START SCROLLSPY DEMO

Regular content External content Rich content Again, regular content Finally, regular content

Regular content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed accumsan erat. Nulla facilisi. Quisque pellentesque quis quam non malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut tincidunt urna. In ultricies dui at rutrum commodo. Aliquam augue nisl, sollicitudin ut risus et, maximus porttitor nisl. Aliquam tempus risus in urna pretium consequat. Aenean eleifend neque sed magna auctor, eget tristique dolor malesuada. Quisque tempus nulla quis leo condimentum, eu molestie tellus ullamcorper. Aenean posuere rhoncus eleifend. Vivamus malesuada semper orci, a lobortis ante dapibus sit amet. Integer id venenatis massa. Interdum et malesuada fames ac ante ipsum primis in faucibus.

External content

External conntent below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis dolor nec porttitor feugiat. Fusce interdum, lacus eget tincidunt porta, mi nibh auctor velit, non dapibus dolor velit et leo.Mauris semper nisi in elementum finibus. Aenean finibus, erat vitae cursus fringilla, ligula turpis maximus eros, quis rutrum elit mi non lacus. Aliquam sapien sapien, consequat ultrices ex sed, vehicula lacinia mauris. Donec eget ipsum vehicula dolor luctus consectetur ut nec lectus. Nunc magna arcu, rhoncus varius hendrerit nec, fringilla id urna. Sed mollis eget orci ut eleifend. Sed purus lorem, dictum non eros et, posuere sodales magna.

Rich content

Rich content below:

Again, regular content

Nulla facilisi. Aliquam aliquam ut turpis et suscipit. Aliquam semper, massa a pulvinar iaculis, erat neque gravida sapien, sit amet pharetra libero enim non nunc. Nullam id dui ac lectus mattis sollicitudin. Ut sodales velit vitae diam hendrerit, nec venenatis nisi volutpat. Pellentesque eu ultrices neque. Vivamus dignissim scelerisque purus, auctor volutpat lectus tristique sit amet. Nullam in nulla nunc. Vivamus pretium, dolor non fringilla blandit, nisl diam blandit sapien, vitae ultricies arcu nisl sed metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Finally, regular content

Phasellus nec ipsum sed lacus luctus aliquam eget ut enim. Ut aliquam sagittis efficitur. Etiam leo erat, ultricies eget augue nec, faucibus sollicitudin est. Vivamus quis consectetur lacus, ac pulvinar felis. Nulla facilisi. Aliquam condimentum cursus odio, et laoreet ligula. Nullam eget velit justo. Nulla semper ac eros ac auctor. Pellentesque sodales lorem in nulla suscipit, vitae congue nibh efficitur. Sed at erat vitae augue imperdiet mollis.

END SCROLLSPY DEMO

Feel free to size the height according to your needs, the default one is 300px, applicable when h parameter is not provided.

Parameters

Here are the default values for scroll spy parameters. If you don’t provide a parameter, then the default value will be used.

h: “300px”
btn: “false”
btnType: “primary”
outline: “false”
separators: “false”
spyBorder: “false”

Tabs

{% include elements/tabs.html 
    source="partials/scroll-spy/demo-scroll-spy"
%}

START TABS DEMO

External conntent below:

Rich content below:

END TABS DEMO

Combined

It is possible to combine tabs and scroll spies (or the other way around). We do not recommend to include tabs into scroll spies (although it is possible) because of potential readability issues on mobile phone screens. Including scroll spies into tabs looks well on mobile screens too. Here is an example based on the content from the folder demo-combined-scroll-spy:

📁 scroll-spy/
├── 📁 demo-combined-scroll-spy
│   ├── 📄 item1.md
│   └── 📄 item2.md
└── 📁 demo-scroll-spy
    ├── 📄 item1.md
    ├── 📄 item2.md
    ├── 📄 item3.md
    ├── 📄 item4.md
    └── 📄 item5.md

{% include elements/tabs.html 
    source="partials/scroll-spy/demo-combined-scroll-spy"
%}

START TABS SCROLLSPY DEMO

Regular content External content Rich content Again, regular content Finally, regular content

Regular content

External content

External conntent below:

Rich content

Rich content below:

Again, regular content

Finally, regular content

External conntent below:

END TABS SCROLLSPY DEMO