# React-three-fiber scrolling and responsiveness

**URL:** <https://discourse.threejs.org/t/react-three-fiber-scrolling-and-responsiveness/35023>\
**Category:** Questions\
**Tags:** drei, threejs, react-three-fiber\
**Created:** [February 18, 2022, 12:06pm UTC](https://discourse.threejs.org/t/react-three-fiber-scrolling-and-responsiveness/35023 "2022-02-18T12:06:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![whackter](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/whackter/32/20240_2.png) [@whackter](https://discourse.threejs.org/u/whackter)\
**Post date:** [February 18, 2022, 12:06pm UTC](https://discourse.threejs.org/t/react-three-fiber-scrolling-and-responsiveness/35023/1 "2022-02-18T12:06:33Z")

</div>

Hello,

After many tries, I couldn’t add scrolling and responsiveness (using camera fov) that will work on every device. Can someone help me with this drei example?

> **[Ground reflections and video textures - CodeSandbox](https://codesandbox.io/s/ground-reflections-and-video-textures-bfplr)**
>
> This example shows drei's new Reflector in combination with video textures.

Thank you.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [February 18, 2022, 7:18pm UTC](https://discourse.threejs.org/t/react-three-fiber-scrolling-and-responsiveness/35023/2 "2022-02-18T19:18:59Z")

</div>

could you be a little more detailed in the description? the box you posted has ground reflections, doesn’t seem related. for scroll we have a new component: [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#scrollcontrols) and r3f is responsive by default. you can pick up the viewport size and scale meshes accordingly:

```nohighlight
const { width, height } = useThree(state => state.viewport)
return (
  <mesh scale={[width, height, 1]}>

```

would fill the entire page for instance.

you can also calculate viewport by giving it a position and a camera (any fov)

```nohighlight
const { getCurrentViewport } = useThree(state => state.viewport)
...
const { width, height } = getCurrentViewport(camera, [0, 0, -10]) 

```