daylilyfield / svrollbar Goto Github PK

View Code? Open in Web Editor NEW

74.0 2.0 12.0 7 MB

simple custom scrollbar made by svelte

Home Page: https://daylilyfield.github.io/svrollbar/

License: MIT License

JavaScript 70.44% Svelte 22.10% TypeScript 1.93% CSS 5.13% HTML 0.40%

scrollbar custom-scrollbar svelte svelte-component

svrollbar's People

Contributors

Stargazers

Watchers

Forkers

koheing graywhale iliser refzlund necropreneur stevenokuto leshak awsr samhren psyirius thomascarman derhaeuptling

svrollbar's Issues

Scrollbar appear on hover?

Thanks for the component.

Is there a way to make the scrollbar appear on contents hover if 100% of contents aren't visible i.e. if there's stuff to scroll to?

At present it seems the scrollbar only appears when user attempts to scroll but there's no indication, by way of a visible scrollbar, that the area is scrollable.

🐛 Smooth Scroll Bug

Here's a REPL showing the bug
https://svelte.dev/repl/30b4e8bbd90c4b8e97100a1225f5be66?version=3.48.0

It happens when you have scroll-behavior: smooth set on the viewport (html or body). Comment that line out and it will work normally. Dragging the native scrollbar up/down works fine. It's only when you try and drag the svrollbar up/down there is a noticeable lag.

I've also included a video demo showing the issue
svrollbar-smooth-scroll-bug.webm

Feature: Horizontal scroll

It seems Svrollbar do not support horizontal scroll at the moment.

It would be a great addition to the library!

alwaysVisible doesn't dynamically update

Thanks for the excellent scrollbar library!

One minor issue, alwaysVisible doesn't seem to update when its value changes after the scrollbar has mounted/initialised.

Use-case for this: I want to show scrollbars when scrolling is available (ie: if inner content height > container height) but hide them when scrolling isn't available.

#4 would be another reasonable solution to this use-case, namely being that I need to give users some indication that a container is scrollable without them initiating a scroll.

make svrollbar disabled

svrollbar should be disabled.

let's say our app has some kind of dialog stuff that appears and covers the entire screen. the content behind the backdrop should not be scrolled.

<Svrollbar disabled={true} ... />

<Svroller disabled={true} ... />

Wrong height on iOS browsers

Hi!
I am using this component on my new project and I am very satisfied with the styling and the easy usage.

There is just one problem on the mobile browser versions on iOS. Seems like the browsers are returning wrong values for height properties. I tried the following browsers on my iPhone 12 mini with iOS version 15.5.

Chrome 103.0.5060.63
Firefox Daylight 102.1 (12709)
Safari 15

I added the svrollbar to my page with the following code snippet.
<Svrollbar alwaysVisible={true} initiallyVisible={true}></Svrollbar>

Here are some screenshots:

Would be nice to discuss if there are some possible solutions for this behaviour.

Kind regards,
René

`package.json` needs exports for Svelte

Your package.json needs to provide exports for Svelte (see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition)
Currently, the lack of a defined export is just raising warnings.
But Svelte has stated that packages without an export will start to fail in upcoming releases.

...but in a future major release this is going to be removed and without exports condition resolving the library is going to fail.

sync viewport height with svrollbar height

instantiate svrollbar with the viewport
update viewport height
svrollbar holds previous viewport height

Unable to preventDefault inside passive event listener invocation

code sample:

I get this error when clicking on a svroller's scrollbar.
It seems to be happening on line 232, or the line getting the alwaysVisible attribute
This error does not affect functionality, but is annoying

The rest of my code is here

<Svrollbar /> adds multiple <style> tags inside <head> every time you scroll

When using <Svrollbar> to replace the Window scrollbar, each scroll adds 2 <style> tags to the <head>. The first is added when you start the scroll and another is added when it ends.

You can verify this by going to the Svrollbar Website , opening up dev tools and scrolling the page.

Option for alwaysVisible to only apply when area is scrollable

Following on from #4, it would be great if we had an option for alwaysVisible to only show the scrollbar if the area is scrollable. I guess you wouldn't want to change the default behaviour of the existing prop since that would be a breaking change, but I imagine you could overload it.

Eg:

alwaysVisible={true} current behaviour
alwaysVisible="scrollable" only visible if area is scrollable (content height > 100% of viewport height)
alwaysVisible="always" same as true

make touchstart event listeners passive

document is not defined

Working with SvelteKit project which enabled SSR mode failed.

500
document is not defined
ReferenceError: document is not defined
    at Svrollbar.svelte:57:24
    at Object.$$render (PROJECT_HOME/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.js:1745:22)
    at index.svelte:235:27
    at Object.$$render (PROJECT_HOME/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.js:1745:22)
    at Object.default (root.svelte:43:47)
    at eval (/.svelte-kit/runtime/components/layout.svelte:8:41)
    at Object.$$render (PROJECT_HOME/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.js:1745:22)
    at root.svelte:37:45
    at $$render (PROJECT_HOME/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.js:1745:22)
    at Object.render (PROJECT_HOME/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.js:1753:26)

The issue caused by no document object in SSR mode, and add a condition statement to fix it.

  // Svrollbar.svelte

  // line 56
  let windowScrollEnabled = false

  // Fixed: 'document is not defined' issue
  let ref = null
  if (ref) {
    $: windowScrollEnabled = document.scrollingElement === viewport
  }

  // line 234
  <div bind:this={ref} class="v-scrollbar" class:fixed={windowScrollEnabled} style="height: {trackHeight}px">
    <div
      bind:this={vTrack}
      class="v-track"
      style="height: {trackHeight}px"
      in:vTrackIn
      out:vTrackOut />
    <div
      bind:this={vThumb}
      class="v-thumb"
      style="height: {thumbHeight}px; top: {thumbTop}px"
      in:vThumbIn
      out:vThumbOut />
  </div>

Feature Request: Add track margin

Curious if you could add a track margin or padding option?

i.e. something like...

--svrollbar-track-margin: 10px;

I'm using the full page scrollbar and it touches the very top of the viewport.

Margin property misspelled

The property buttom should probably be bottom

svrollbar/types/Svrollbar.svelte.d.ts

Line 41 in 2467de3

margin?: { top?: number; right?: number; buttom?: number; left?: number };

Visibility transition causing rerender issues between routes in Sveltekit

When initiallyVisible or alwaysVisible is true, Svrollbar doesn't properly rerender when changing routes in Sveltekit, causing layout bugs. This only occurs if the one of the visible override props are used, I assume due to the scrollbar not unmounting/updating in time (is there a rogue exit transition or something?)

Screen.Recording.2022-05-17.at.12.56.52.PM.mov

unmatch scrollbar thumb height in mobile chrome

i have two scrollbars on the right side of this window, one is the svrollbar and the other is the mobile chrome scrollbar. the svrollbar's scrollbar must match the height of the mobile chromes's one, but does not. this is because the auto-expanded navigation bar (i dont know the name of the view) may do bad things.