/    Sign up×
Community /Pin to ProfileBookmark

Floating or Fixed Scrollbar

Copy linkTweet thisAlerts:
Mar 31.2021

I’ve got a table within a DIV.

Overflow-x set to scroll as some tables are wider than the available space.

The issue is a browser scroll bar at the bottom of the page is out of sight. Is there any options for a scroll bar at the top of the container?

Can I make it fixed or absolute position so it follows the user down the page?

to post a comment
CSSJavaScript

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertApr 01.2021 — I have played with the scrollbar. Give you some ideas?

Live: http://94.237.92.101:6060/posts

https://jsfiddle.net/6s0tjfwL/3/
Copy linkTweet thisAlerts:
@kiwisauthorApr 01.2021 — Cheers, the issue is on the X axis no Y

Refer to this https://jsfiddle.net/cysrwhxn/5/
Copy linkTweet thisAlerts:
@SempervivumApr 01.2021 — Datatables features all you need: Scrolling horizontally and vertically, fixed header:

https://datatables.net/examples/basic_init/scroll_xy.html

I recommend to accept the overhead of jQuery and the lib itself.
Copy linkTweet thisAlerts:
@kiwisauthorApr 01.2021 — @Sempervivum#1629833

Yes but that provides the same outcome as my HTML/CSS

A fixed scrollbar the bottom. I'm wanting something above or floating on top of my table
Copy linkTweet thisAlerts:
@SempervivumApr 01.2021 — I see. There are several scripts for custom scrollbars out there, maybe you will find one where the scrollbar can be placed anywhere. E. g. this overview:

https://www.cssscript.com/best-custom-scrollbar-javascript-libraries/

If not you will have to code it on your own.

On the other hand users are familiar with the horizontal scrollbar being located at the bottom. Why break this practice?
Copy linkTweet thisAlerts:
@kiwisauthorApr 01.2021 — @Sempervivum#1629844

Because users are unaware there's extra columns.

I'm thinking maybe a fix circle with arrows, if clicked force a scroll. Is there JS code to do this?
Copy linkTweet thisAlerts:
@SempervivumApr 01.2021 — >I'm thinking maybe a fix circle with arrows, if clicked force a scroll.

Don't understand what you mean? Arrows like those in a slideshow or carousel?
Copy linkTweet thisAlerts:
@kiwisauthorApr 01.2021 — Here's a working idea.

I'm keen for the scroll to happen in relation to how much scrolling is needed. Currently doesn't work that well.

https://jsfiddle.net/xozebsaf/4/
Copy linkTweet thisAlerts:
@sibertApr 01.2021 — Why not limit the height?

https://jsfiddle.net/2kxjcrfh/
Copy linkTweet thisAlerts:
@kiwisauthorApr 01.2021 — Same code, all done
Copy linkTweet thisAlerts:
@sibertApr 01.2021 — > @kiwis80#1629849 Same code

Yes, just add height.

``<i>
</i>.container {
height: 60vh;
}<i>
</i>``
Copy linkTweet thisAlerts:
@kiwisauthorApr 01.2021 — @sibert#1629850 height has nothing to do with it
Copy linkTweet thisAlerts:
@sibertApr 01.2021 — > @kiwis80#1629851 height has nothing to do with it

The horizontal scroll will be visible?
Copy linkTweet thisAlerts:
@SempervivumApr 01.2021 — A simple solution is possible when having two scrollbars, the default one at the bottom and an additional one on top. The latter is synchronized with the default one:

https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table/56384091
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...