# Horizontal navigation scrollbar with button to scroll

**URL:** <https://community.weweb.io/t/horizontal-navigation-scrollbar-with-button-to-scroll/9958>\
**Category:** How do I?\
**Created:** [July 26, 2024, 2:09pm UTC](https://community.weweb.io/t/horizontal-navigation-scrollbar-with-button-to-scroll/9958 "2024-07-26T14:09:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alnkde](https://avatars.discourse-cdn.com/v4/letter/a/e79b87/32.png) [@alnkde](https://community.weweb.io/u/alnkde)\
**Post date:** [July 26, 2024, 2:09pm UTC](https://community.weweb.io/t/horizontal-navigation-scrollbar-with-button-to-scroll/9958/1 "2024-07-26T14:09:50Z")

</div>

Hi.

Please help to understand what’s wrong with my settings and formula to add this functionality. Because scrolling not working when I click arrow button. I add an ID for container with navigation links: ‘nav-links-container’, add css-styles to hide scroll bar, and add workflow with click action and custom JavaScript code to button with right arrow. Pls check my screenshots. Thanks!

 ![Снимок экрана 2024-07-26 в 16.48.56](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1382cde07abafe9e3b9994d2af80433f15acc966.png)  
 ![Снимок экрана 2024-07-26 в 16.55.36](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f33737a4b822521e0d4cb94ca44dcb12799087a7.png)  
 ![Снимок экрана 2024-07-26 в 16.49.48](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/63c23c1cd6c28e31504f888a1df4c008e94ec697.png)  
 ![Снимок экрана 2024-07-26 в 16.49.56](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e0a9b8e140f5507505151e5d1eba5ac523a17f3e.png)

---

<div class="post-metadata">

**Author:** ![GeovanyFerreira](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/geovanyferreira/32/13093_2.png) [@GeovanyFerreira](https://community.weweb.io/u/GeovanyFerreira)\
**Post date:** [July 26, 2024, 3:30pm UTC](https://community.weweb.io/t/horizontal-navigation-scrollbar-with-button-to-scroll/9958/2 "2024-07-26T15:30:43Z")

</div>

I think you can find the answer in this tutorial of @jptrinh

> [@How to scroll a scrollable container on Click of a other button](https://community.weweb.io/t/how-to-scroll-a-scrollable-container-on-click-of-a-other-button/7285/3):
>
> Hey wave I think I’ve managed to reproduce the desired outcome with .scrollLeft Here is the custom JS on my button workflow. I needed to target the parent element of the collection (because WeWeb auto-generate a div) const collection = wwLib.getFrontDocument().querySelector('#collection').parentElement; collection.scrollLeft += 100; Does that help?

---

<div class="post-metadata">

**Author:** ![alnkde](https://avatars.discourse-cdn.com/v4/letter/a/e79b87/32.png) [@alnkde](https://community.weweb.io/u/alnkde)\
**Post date:** [July 28, 2024, 8:28am UTC](https://community.weweb.io/t/horizontal-navigation-scrollbar-with-button-to-scroll/9958/3 "2024-07-28T08:28:21Z")

</div>

Thanks, helps to add .parentElement, it’s worked now!