We Keep Coding

Custom Floating or fixed scrollbar/DIV bar

I have a DIV on my webpage which is a set width, say 1300px wide. Inside this I have a HTML table which has a width that sometimes exceeds that of the parent DIV. It depends how long some of the data in each column is.
Easy answer is overflow-x: auto or scroll.
The issue is; the scroll bar is at the bottom of the DIV and if my table is 50+ rows tall it's a bad user experience as users may not notice columns are hidden and there's a scrollbar at the bottom of the page.
I've spent some considerable time on google. I can't find anything.
Is there a way of loading a semi transparent bar (DIV) or custom scroll bar that to somehow overlay my table to users can move it and scroll left to right and view all of the table data?
Thinking either JS or CSS most likely both.

Is there a way to move the vertical scrollbar to a location other than the left or right side?

I have a modal that has a horizontal scrollbar when the modal is resized on small screens. When that horizontal scrollbar appears, the vertical scrollbar disappears because it is stuck to the right. I would like the vertical scrollbar to stay at the right side of the modal while I scroll horizontally to the right. A picture of this behavior is show below. I want the vertical scrollbar stuck on the right while I horizontally scroll to the right rather than only being present when I finish horizontally scrolling to the right.
Is there a way to accomplish this? I believe another issue is that on Windows devices the scrollbar takes up space unlike in Mac devices.

You can customize the scrollbar a bit (see https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp), however, I don't know if you can change the position.
I did find a javascript scrollbar-plugin, which I haven't tried, but maybe it is worth a try? You can find it at https://grsmto.github.io/simplebar/.

fix position of overlapping element on scroll using relative and absolute positions

I have a div with fixed width and height, overflow: scroll and position: relative. Inside I have two table elements, first one containing 10 columns, and the second one which is a copy of the first table and has its first 3 columns only. I gave position:absolute to the second table and given that both tables have save styling the second table will overlap the first one. My requirement is when the div is scrolled horizontally, I want the second table which is overlapping the first one to be fixed, i.e, it should not move on horizontal scroll, and on vertical scroll the content of second table should be scrolled properly.
I have created the following fiddle with what I have so far:
JS Fiddle

I don't think that's possible with css. What you are asking is for the left hand table to scroll vertically with it's container div, but not to scroll horizontally.
I'd have a re-think on your requirements here.
You could just put the right hand table inside a div with overflow:scroll, so only that one moves when you scroll horizontally. You'd have the issue then of the two no longer being lined up when you scroll vertically - could you make it high enough so so the whole table displays? Would that work for you?
EDIT:
In your js-fiddle then you've set height:500px; for .container.
If you don't need that, then remove it so things will set their own height and display the whole table. Then you only have the sideways scroll to deal with, and that's doable (e.g. put a wrapper on the right hand table only that has overflow:scroll)
No I'd not use position:fixed here, that sets something relative to the browser window, which is no good for users scrolling up and down.
have a look at this: http://www.barelyfitz.com/screencast/html-training/css/positioning/
that's great to get your head around css positioning.

Fixed Horizontal Scroll Bar

Ok, so here's what I have: http://jsfiddle.net/E2U3j/
And as it's a pretty large div, I'd like to have a fixed horizontal scroll bar on the top of the window when I'm scrolling into that div, but if I'm not completely into the div (e.g If the div is only visible a half,I mean if it doesn't fill the whole height of the window), the horizontal scroll bar should be in the top of the div... How would you solve this?
Thanks :)

Try jQuery Scrollbar with external scrollbar (available on advaced scrollbars demo page) - scrollbar can be placed in any part of your page, you can hide/show it, make it fixed, etc...
The one thing you need is to handle window scroll and check current scroll position, compare it to your container offset and if it's greater - make scrollbar fixed, if not - change position to absolute (in case when scrollbar is inside of your container).

this code should solve your problem<div id="topnav" style="position:fixed; max-height:x; overflow-y:scroll;"></div> then the contents of your top nav is scrollable within itself and is fixed on the top of your page

Overflow issue in CSS

i have an iframe on my page and seem to be facing somewhat common issue...
E
Actually there are 2 iframes ...
1. Header iframe which has table with some columns...
2. Content iframe which has table with column data..
Now the 2 iframe tables are aligned vertically...
The alignment works fine if the columns are less and there is no scrollbar in the 2nd iframe..
But if the columns increase, I get a horizontal scrollbar in "only" the content iframe and as i scroll it I have a sync JS which scrolls the top iframe as well..Now at the end bcoz of the scrollbars occupying space, the vertical alignment gets disturbed..
As this seems to be a typical issue, does anyone have asolution which would be really helpful. I am open to CSS/Js approach as well..Thank you..

you could adjust the height of the iframe if the scrollbars are present, just check the iframes scrollWidth against it's offsetWidth and if the scroll width is higher, increase the height of the iframe by the height of the scrollbar, prolly 5-10px, I'd have to check to be sure.
Something like:
$('#my_frame).ready(function(){
if(this.scrollWidth>this.offsetWidth){
$(this).css({height:'+=10'});
}
}