# How to have scroll zoom behave differently from drag zoom

**URL:** <https://community.plotly.com/t/how-to-have-scroll-zoom-behave-differently-from-drag-zoom/83620>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [April 6, 2024, 2:15am UTC](https://community.plotly.com/t/how-to-have-scroll-zoom-behave-differently-from-drag-zoom/83620 "2024-04-06T02:15:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tinanemati](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@tinanemati](https://community.plotly.com/u/tinanemati)\
**Post date:** [April 6, 2024, 2:15am UTC](https://community.plotly.com/t/how-to-have-scroll-zoom-behave-differently-from-drag-zoom/83620/1 "2024-04-06T02:15:22Z")

</div>

I’m looking to have the scroll zoom feature only update the upper limit in y-axis range while having drag mode zoom behave as default plotly zoom behavior. Is there a way to achieve this using react plotly package?

---

<div class="post-metadata">

**Author:** ![Saratoga](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/saratoga/32/28634_2.png) [@Saratoga](https://community.plotly.com/u/Saratoga)\
**Post date:** [July 11, 2024, 6:20pm UTC](https://community.plotly.com/t/how-to-have-scroll-zoom-behave-differently-from-drag-zoom/83620/2 "2024-07-11T18:20:27Z")

</div>

In this case you have to do the manual zoom by deactivating it on the Y axis using fixedrange: true and in the plotly relayout event calculate the maximum range, this is very useful mainly in bar graphs when we want the base to remain fixed

As an extra piece of information, in the axes there are some boxes that zoom in only one direction, hopefully in the future they will implement it as properties in the layout something like the following

```auto
xaxis: { zoom: "left", or "right", or "both" }
yaxis: { zoom: "up", or "down", or "both" }

```

https://codepen.io/saratoga01/embed/preview/abgzeQV?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=abgzeQV