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.
Related
I got a website (which I didn't made) that, when I resize to test responsiveness, it works normally, though, when getting it back and scrolling down (and then up), there seems to appear a gap between the header and the element under it.
Site: http://miriam.mx/index/
Before resize and scroll:
After resize and scroll:
The site is using a lot of plugins and css:
The thing is that I need some hint to solve it, since I'm not experienced with any of those CSS works yet.
This has to do with your sticky code. Looks like you are using Sticky-Kit. It's setting the height of the sticky div to a height bigger than your children elements. You are using 1.1.1, which they have 1.1.2 and that seems to add some support with auto adjusting when scrolling. You could also play around with the recalc settings.
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.
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 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.
I have a set of Javascript functions I use with a table of input elements to enable navigation. Things like keeping track of the currently focused element, and overflowing from the end of one row to the start of the next. I have scrollbar support with a fixed first column by creating one table that is only one column wide as my fixed column and having a scrollbar for the other table.
However, I have been noticing recently, that the default behavior of the scrollbar is a bit deficient. When I navigate to the last column, Firefox leaves that column partially obscured by the scrollbar instead of scrolling far enough to see it. Likewise, once I scroll over so I can see the other part of the last column, when I move on to the next row and the nav code sets focus to a cell in the first column (the frozen table), Firefox doesn't change the scrollbar so I can see all of the first column.
Because of this, I've been looking into how to modify scrollbar positioning using javascript. My table doesn't use a vertical scrollbar, only a horizontal one. So I stumbled upon scrollLeft.
document.getElementById("meastable").scrollLeft = 1; // reset scroll to leftmost
Unfortunately this seems to only work once in a while. When I enabled Firebug and traced through my navigation code where this line is, it seems to work once in a while, but most of the time, this line will run but the tables scroll left property is unchanged and I can't see a change visually either.
I also set scrollLeft to a high number so it will be set to the maximum as is described in the documentation, and that also does not work (except once in a while).
I use the following code to set up the scrollbar with my table.
<div style="overflow:auto">
<table id="meastable" border="1">
According to Mozilla's documentation, this seems to be something that originated in IE but now works in Firefox. Does this actually not work in Firefox as the inhouse project this is for will be Firefox only.
So I'm trying to figure out what's wrong. Is scrollLeft known to not work right, or should I go back and see if I've screwed something up in my definition of the scrollbar or something along those lines?
The containing div is the element with overflow. You need to set the scrollLeft of the div, not the table.