oberonamsterdam / horizontal Goto Github PK

I'm creating an horizontal website, it becomes a vertical website if the viewport is less than 992. I create an event listener in resize event.

let scroll = null;

function enableScroll() {
    if (window.innerWidth > 992) {
        scroll = new HorizontalScroll({
            preventVerticalScroll: false,
        });
    } else {
        scroll && scroll.destroy();
    }
}

It works from small to big viewport, but when I try to disable it, the function "destroy" doesn't work, and the website is cannot scroll vertically.

PD: I tried to use the preventVerticallScroll option, and doesn't work :c

ignoreScroll is only considered for wheel events

Is this by design or just a slip?

Google maps uses a ctrl+scrollwheel event to zoom in and out, without hijacking the standard scroll event.

If we ignore scroll wheel when ctrl is pressed, this will prevent both the horizontal scroll and map handling the scroll. It will also allow the ctrl+wheel to control zoom in Chrome.

Hi, thanks for the project and am looking forward to trying it.

It seems that on desktop it scrolls horizontally as intended

But on mobile it can go both ways. I tried your codesandbox on my devices and the issue occurs

set the block min-width to 100

on ios: scroll horizontal
on android: scroll vertical - see yellow body, scroll horizontal - see blocks

I thought on mobile, horizontal should be disabled and the elements reorder themselves to be vertical.

Any ideas?

Thanks :)

Is it possible to manually force scroll to a specific position or element (after some button is clicked for example)?

I tried to dispatch scroll or keypress events, however none of them do the work...

Check node name or something before blocking keyboard nav?

When using a mouse and scrolling (fast), you can't reach the end of the page. This issue is probably caused by the following if statement:

When the distance is superior to the page/container width the scrolling action is dismissed, where it should be taken into account. To fix the issue, an else statement can be added to simply set the scroll to the maximum value (100% scroll).

I'm not opening a PR because I don't know how to do that, but since it seems easy to fix I hope this issue will be fixed quickly 😁.

No more recommended CSS, attempt to set it through JS.

Title basically says it all. Like here:
https://github.com/corentinfardeau/horizontal-scroll

Thanks for the package! Appreciate it!

Hi. Great plugin and works like a dream on Chrome & FF.
However, there is an issue with Safari. The Y axis wheel movement does not move the page to the right as it does on Chrome & FF. Is this a know bug/is there a fix?
Thanks.

Hello,

Great plugin, thanks a lot !

In your example here :
https://codesandbox.io/s/github/oberonamsterdam/horizontal/tree/master/examples?module=/vanilla-container.js&initialpath=vanilla-container.html&file=/vanilla-container.html

the anchor "Back to start" doesn't work and I have pretty much the same issue on my site (in my case, the target is the footer at the end of the page, it works well the first time but if I try a second time, it goes to the footer and comes back to the beginning of the page in a blink of an eye).

Maybe, I miss something ?

Regards

Hello,

I tried to implement css scroll snaps but it seems to come into conflict with your script : when I try to scroll, my sections with scroll-snap implemented shake a lot and it's visually awful.

Do you know how I could avoid this ?

Thanks a lot !

After scrollIntoView function. wheel start scroll from beginning than jump to current.
Solution

Now only the documentElement is demonstrated

Hi,
I've built a react horizontal scrolling gatsby site that utilises this package, I've also used reach/router to load in the inner pages. When these pages are loaded the overrides are still happening on the html tag, so the internal pages will not vertically scroll.

Is there any way to disable for the inner pages?
I've tried creating a new instance that allows vertical scrolling but it doesn't seem to work.

Cheers.

Would love to have access to the minify version so I can utilize this on my webflow site

Hi! Love the project and would like to use it an ongoing project using Svelte. Currently if I write the simplest implementation of the library:

<script>
  export let name;
  import { onMount } from "svelte";
  import HorizontalScroll from "@oberon-amsterdam/horizontal";

  onMount(() => {
    new HorizontalScroll();
  });
</script>

I get the following error in console:

Uncaught ReferenceError: events_1 is not defined

This is likely some rollup error I'm not super knowledgeable about. Could you direct me to some resources to help, or let me know if the project is currently incompatible with Svelte?

Thank you!

Mostly the container variant

The horizontal scroll works great, but if you have an element with "overflow: auto;" or "overflow: scroll" you can't scroll up and down the content of this element with the mouse wheel.

I am using Chrome and React - and I get this message upon trying to run the app.

TypeError: Cannot read property '_events' of undefined
push../node_modules/events/events.js.EventEmitter.init
node_modules/events/events.js:90
  87 | 
  88 | EventEmitter.init = function() {
  89 | 
> 90 |   if (this._events === undefined ||
  91 |       this._events === Object.getPrototypeOf(this)._events) {
  92 |     this._events = Object.create(null);
  93 |     this._eventsCount = 0;
View compiled
EventEmitter
node_modules/events/events.js:54
  51 | }
  52 | 
  53 | function EventEmitter() {
> 54 |   EventEmitter.init.call(this);
  55 | }
  56 | module.exports = EventEmitter;
  57 | 

top of my App component:

import useHorizontal from '@oberon-amsterdam/horizontal';

import "./App.css";

import Arts from "./components/Arts.js"
import Art from "./components/Art.js"

import SignIn from './components/SignIn';
import SignUp from './components/SignUp';
import User from './components/User';

import About from "./components/About"




function App() {
  
  
  useHorizontal();

I can show more code if you want, but I can't imagine anything in there would be breaking it.

How can I grab the scroll position of the scrolling container if I'm using the Hook example?

The README has an example for when you instantiate an instance of HorizontalScroll:

const horizontal = new HorizontalScroll()
horizontal.on('scroll', fn)

But if I use the hook I don't get an object back, so wondering how I would get the position of a nested div for example:

const [container, setContainer] = React.useState()
useHorizontal({ container: container })

return (
    <div>
        <div className="container" ref={ref => {setContainer(ref);}}>
        </div>
    </div>
)

Still a n00b to hooks so this may be a simple question, thanks if you can help!