Forcing Scrollcontrols to use native htmlScroll

Questions
,
1

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.

2

well you could always take the code and adjust it to your needs.

i’ve been trying lenis more often lately and it’s also a good option https://lenis.studiofreight.com/

1 Like
3

@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.

vue

    <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 {};