Horizontal Scroll even after Disable X-Axis Scrolling

[blitzve0]

demo.mp4

Hi, I am using a plugin to disable X-axis horizontal scrolling totally, but sometimes accidentally when I hold and drag from the right edge, the site starts horizontally dragging. You can check the video and can try it out also here https://haspr.in/

This is the Plugin

import Scrollbar from 'smooth-scrollbar'

class DisableScroll extends Scrollbar.ScrollbarPlugin {
  static pluginName = 'DisableScroll'

  transformDelta(delta, fromEvent) {
    delta['x'] = 0

    return delta
  }
}

DisableScroll.pluginName = 'DisableScroll'
export default DisableScroll

[idiotWu]

Oh, that's because we forget to make the scrolling delta from select events transformable 🤦‍♂️. That's surely a bug, but I think we can get rid of the horizontal scrollbars with several lines of CSS, and you won't need a plugin anymore:

.layout {
    /* height: 100vh; <- not sure why you wrote this but it seems safe to delete it */
    background: #fff;
    overflow: hidden; /* add this */
}

---

Edit: you also need to recalculate the floating contact button's position to avoid overflow: bottom = scrollbar.limit.y - scrollbar.offset.y. Here is a helper function for fixed elements: https://codesandbox.io/s/smooth-scrollbar-fixed-element-ki0syo?file=/src/fixed-element.ts

[blitzve0]

Hi I tried this CSS Trick, and its working but unfortunately it's breaking a lot of functionality, like the menu and page transitions suddenly became super laggy and a lot of gsap animations are not working due to this, is there a way to remove that select event scrolling ?

[idiotWu]

user-select: none will disable select events though. But I'd suggest you fix the horizontal overflow caused by .pin-spacer first.

[sadeghbarati]

@blitzve0

• Best practice for smooth-scrollbar is don't initialize Scrollbar on the body
• Create another wrapper and init Scrollbar on it
• You may face some issues on Safari if you init Scrollbar on the body
• If you init Scrollbar on body add these styles

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

/*
if safari
*/
body.lock-scroll {
    position: fixed;
    inset: 0; /* https://caniuse.com/?search=inset */
    top: 0;
    left: 0;
}

• Take a look at GSAP ScrollTrigger + smooth-scrollbar example
• Check body-scroll-lock code for safari
• Check https://idiotwu.github.io/smooth-scrollbar/

html, body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #555;
    font-size: 16px;
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
}

position fixed on both html, body can be used to solve overflow problems, but It may disrupt the gsap ScrollTrigger function without set ScrollTrigger default scroller element

const scroller = document.querySelector("#main-scrollbar")
ScrollTrigger.defaults({ scroller  });

[blitzve0]

Hi I was adding my divs on separate pages separately for smooth-scroll but the problem was the gsap scrolltrigger animation only worked once, unless i use document.body as the viewer, that's why I'm using body as view, i implemented the tips you gave, but i didn't understood the use of body scroll lock here, could you explain a little bit

[sadeghbarati]

Check ScrollTrigger defaults scroller

Check body-scroll-lock for Inspiration

[blitzve0]

bodyScrollBar.addListener(ScrollTrigger.update);

ScrollTrigger.defaults({ scroller: scroller });

Can someone explain the function of these two lines in the above ScrollTrigger + Smooth-Scrollbar Example ?

[Robmel12]

I don't know if there is many side effects to doing this but i just went into smooth-scrollbar/events/select.js

In the scroll function
...

function scroll(_a) {
//scroll.x on select is turned off
var x = a.x (<= set this to 0), y = _a.y;
if (!x && !y)
return;
var offset = scrollbar.offset, limit = scrollbar.limit;
// DISALLOW delta transformation
scrollbar.setMomentum(clamp(offset.x + x, 0, limit.x) - offset.x, clamp(offset.y + y, 0, limit.y) - offset.y);
animationID = requestAnimationFrame(function () {
scroll({ x: x, y: y });
});
}

this turns off side scrolling permanently for scrolling select events. Which for me was fine.

[LiuN1an]

I finished it more rude, I search for translate3d(x, y), and make all x always 0. Then rebundle. It works