I have a div with its own scrollbar using the overflow: auto property.
With this div I display a table. For some of the rows I would like to display markers on the scrollbar of their positions within the div.
At the moment I am calculating the position of the desired rows I want to mark within the scrollbar by subtracting the offsets from the parent div, and then I am creating div with their fixed position
With the newly created div, how do I display that position on the scrollbar rather then in the div or is it even possible to add fixed divs on the scrollbar?
There's really no good way to do this. The scrollbar created by overflow: auto is a bit of a weird beast: its size and metrics are dependent on the browser and OS, and cannot be reliably detected by Javascript.
(For example, the scrollbar on most Windows systems will have "buttons" at the top and bottom, but the Mac OS scrollbar does not; this changes the positioning of the scroll thumb for content, as it affects the overall length of the scrollbar. In fact, the Mac OS scrollbar is invisible by default on many systems, so attempting to position content over it will look rather strange!)
About the only way I can imagine going about this would be to forego the native scrollbar entirely and use a Javascript-created standin, but those tend to have wonky behavior that will piss users off. Unless this feature is extremely important to you, I'd be inclined to write it off as impossible.
Related
Is it possible to programmatically change scrollbar's properties? Let's say I have a long table, where rows loaded lazily, and I want to emulate "paging" using vertical scrollbar.
Finite number of rows and current position in the dataset are known, based on that can I change scrollbar range and thumbtrack height? Let's say it displays only 100 rows at a time, but actual number of rows in dataset is 10000, can I make scrollbar look, like the table has 10000 elements?
Basically I want to control scrollbar's thumb height and position. Possible, no?
I guess somehow I can hide the scrollbar and build my own input type="range" and position it vertically, but I'm curious if it's possible to tweak scrollbar directly?
I do not believe it is possible as of today. (October 8th 2014)
If you use the latest stable version of chrome (37), the inspection tools do not show a shadow root for any scrollbars. We can use this as proof that it is not editable as a majority of the elements are now implemented and can be customized by shadow dom can be viewed having a shadow.
this gives an example of styling the video player.
example link shows them actually styling an input type="range" element. (in case that is of any use)
This probably for 2 reasons.
1 scrollbar implementation and its look and feel is os dependent.
The scroll bar on windows is a different size than the scroll bar on mac.
2 scrollbar user interaction is also dependent on the type of device.
For example on macbook pro laptop the scroll bar is different upon having a mouse plugged in.
Android does not even show a scrollbar at all except when actively scrolling.
tl;dr
as of right now the scroll bar world is too fragmented for native scrollbars to be styleable by html.
You could this with the Mousewheel jQuery plugin, but it will only work if the user uses the scroll wheel.
I don't think it's possible to disable the user from manually scrolling by dragging the scroll bar.
You could hide the scroll bar entirely, though, by setting overflow:hidden to body.
I am lacking of a better term to describe this UX. It is basically a content container that is scrollable. Depending on the scrolling position, the top or bottom edge of container would light up (or change style) to indicate there is content at either of the direction. For example, when you go to Yahoo.com, and scroll down a little, the top edge of the scrollable section would turn purple, indicating there is content at the top that's outside of the viewport. (See image below)
I wonder if there is already some well known script library that can achieve this so I don't have to reinvent the wheel.
This is a fairly custom concept, but you can see how to get started by looking at the way Bootstrap's Affix method works: http://getbootstrap.com/javascript/#affix
Essentially you will need to have a scroll event listener which tracks what the position is that a user is scrolled on a container. When the scroll position reaches certain breakpoints, the listener function will trigger CSS classes which may do a variety of things.
I'm trying to figure out how this was accomplished:
http://www.paranorman.com/
In this site, the browser window's scrollbar drives the scroll position of a DIV. However, the window has a scrollbar even if it fits entirely into your browser window.
I need to make a site with a container element that will be driven by a scrollbar, even though the site container will be a size that fits in most desktop browser windows without needing to be scrolled.
This is done with trickery, where the body (or some other element) has a large size so as to get a scrollbar, and another element is placed with position fixed and height/width 100% in front of the scrolled element and takes up the entire screen, so the scrolled element is'nt visible. Then it's all about getting the scrollTop/Left values and moving elements inside the front fixed element according to how much the scrollbar is moved, making it look like it's being scrolled, when you're really moving stuff with javascript based on the scrollTop/Left values, and we call it, parallax. It all sounds harder then it really is.
In html if a child div is bigger than the parent div it will create scrollbars on the parent div if you set the appropriate style rules.
However, I want it so that when an attempt to scroll occurs (by hitting the arrow keys, making the appropriate javascript call on the element) the minimum needed expansion in size occurs on the child occurs such that it can scroll to the degree that it would have scrolled anyway if the child was already that big.
To state that again: if the child was 300px width within a parent of 200px width, and I hit right arrow key, and it scrolls 20 pixels to the right, then if the child is 200px in that same scenario, I want it to enlarge in width by 20 pixels and no more if possible, and then scroll 20 pixels to the right.
This is all assuming there is no way to make a sub-element scroll within its parents regardless of whether it's actually larger than its parent. There might well be so I apologise in advance if i haven't done enough research. :)
You probably know that the style overflow: scroll will make scroll bars show up regardless of child size. Do you actually need Javascript to boost the child dimensions, rather than having an extra wrapper div with greater dimensions that would cause the scroll like in this demo? I know Safari already scrolls approximately 20px on arrow key down within selected scroll divs by default, and I would assume other browsers have this functionality as well.
If you do have need for increasing the div size with javascript, jQuery has a few functions that would be helpful. The .keydown() method looking for left and right arrow keys (which I believe are key codes 37 and 39 respectively) and the .animate() or some other CSS method would work to resize the div chained together.
The .scroll() method could come in useful as well. You could chain the resize code to the scroll method with an overflow: scroll property already applied. I would test to see if browsers will trigger the .scroll method even if the scroll bars are empty. If not, you could potentially make the child only 1px wider/taller then the parent div and then rely on the jQuery to further resize on the user's scroll.
Broadly speaking, I would advise against the javascript/jQuery resize and scroll. Compatibility with different browsers, especially mobile browsers, would be inconsistent or unusable. I don't know exactly what your needs are, but if it can be accomplished with only HTML/CSS it would be much cleaner and more compatible. I would reserve the javascript for cases where usability will not be lost if it does not run.
I'm building a web app that has a grid of many small scrollable divs (actually, Ace editors), and this grid has enough elements that it is larger than the window. When a user begins scrolling over empty space, I want them to be scrolling the window itself; when a user begins scrolling inside a grid element, I want them to scroll the div contents there. The thing is, if a user begins scrolling over empty space, and then scrolls such that their mouse goes over a grid element, that scrollable div captures all the scrolling events, interrupting the user's flow over the grid and "trapping" them inside the grid element.
I can't manually capture onmousewheel events, since AFAIK there's no way to capture horizontal mouse wheel movement separately from vertical, and I want users on Mac OS X to be able to scroll in all directions. I've thought about using JS to add an invisible div with a very high z-index on the first onscroll event, and removing it as soon as onscroll events aren't triggered for a certain period of time. Haven't yet coded this up, but I'm wondering if there's a better solution, or if there are any potential pitfalls that I haven't thought of. Any help or advice would be great! Thanks!
I think a solution for this would be incredibly difficult due to browser support, and the actual solution, which would probably be something like calculating the scroll, backtracking the div, and applying the scroll to the page.
You could do something like this:
$('div').scroll(function(e){
// figure out how much it has scrolled
window.scrollBy(0,howmuch);
});
I don't recommend this solution in the slightest though, I think the better option would be to set the divs to overflow:hidden; and pick up a solid scroll plugin, and use that to customize the scroll behavior on the divs.