daylilyfield / svrollbar Goto Github PK
View Code? Open in Web Editor NEWsimple custom scrollbar made by svelte
Home Page: https://daylilyfield.github.io/svrollbar/
License: MIT License
simple custom scrollbar made by svelte
Home Page: https://daylilyfield.github.io/svrollbar/
License: MIT License
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
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>
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
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.
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.
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} ... />
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.
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.
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 behaviouralwaysVisible="scrollable"
only visible if area is scrollable (content height > 100% of viewport height)alwaysVisible="always"
same as true
It seems Svrollbar do not support horizontal scroll at the moment.
It would be a great addition to the library!
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Γ©
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?)
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.
The property buttom
should probably be bottom
svrollbar/types/Svrollbar.svelte.d.ts
Line 41 in 2467de3
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.