Is it possible to make a canvas follow the native htmlScroll instead of the custom scroll it creates on the canvas.
I would like to use the native htmlScroll to put content under the canvas that should show up after the Scrollcontrols pages are done.
I’m aware that a similar effect can be obtained by using but I was hoping there was a cleaner way of implementing it.

@drcmda Thanks for awnsering!
I’m new to React and three Drei and I’m not sure how i could change the code to obtain that result.
I presume I would have to modify the react component, but i’m unsure of the changes I would have to make.
I’m aware that “tres.js + cientos” has this feature and is labeled as htmlScroll which is what i’m looking for, unfortunatly it’s for vue.

" But it’s not all, you can also pass the htmlScroll props this will deactivate the custom scroll and use the native html scroll.

    <ScrollControls htmlScroll />
WARNING
If you set the htmlScroll you need to set your html to have content that create scroll. so the pages prop will not work
The htmlScroll will set the TresCanvas as a fixed background."
What would i have to add to this component to have the same effect in React Drei?
import * as THREE from 'three';
import * as React from 'react';
import { ForwardRefComponent } from '../helpers/ts-utils';
export type ScrollControlsProps = {
    eps?: number;
    horizontal?: boolean;
    infinite?: boolean;
    pages?: number;
    distance?: number;
    damping?: number;
    maxSpeed?: number;
    enabled?: boolean;
    style?: React.CSSProperties;
    children: React.ReactNode;
export type ScrollControlsState = {
    el: HTMLDivElement;
    eps: number;
    fill: HTMLDivElement;
    fixed: HTMLDivElement;
    horizontal: boolean | undefined;
    damping: number;
    offset: number;
    delta: number;
    pages: number;
    range(from: number, distance: number, margin?: number): number;
    curve(from: number, distance: number, margin?: number): number;
    visible(from: number, distance: number, margin?: number): boolean;
export declare function useScroll(): ScrollControlsState;
export declare function ScrollControls({ eps, enabled, infinite, horizontal, pages, distance, damping, maxSpeed, style, children, }: ScrollControlsProps): React.JSX.Element;
type ScrollProps = {
    children?: React.ReactNode;
    html?: false;
    style?: never;
} | {
    html: true;
    style?: React.CSSProperties;
export declare const Scroll: ForwardRefComponent<ScrollProps, THREE.Group & HTMLDivElement>;
export {};