how to get the position of the scroll bar - javascript

I want to get the position of the scroll bar (not the scrolltop position) but all I see is only $(document).scrollTop(). Can someone help me with this. For my understanding, the $(document).scrollTop() gives the top most visible position of the window, but I want the exact position where user's scroll bar slider is.
EDIT: I have added more explanation. I need to get the position of the scroll bar itself so as I can put some div (as the one with arrow in the image) follow the scroll bar.

As per your requirement, I thought you need to maintain the arrow button always in the center of the page. If this is your need means, you can apply the fixed position for the arrow div, like below:
.arrow {
position: fixed;
top: 50%;
}
So that, the arrow element always maintained in the page center position even the page scrolls.

Related

How to anchor an element by its bottom coordinate rather than its top

I am making a poker table using react. Right now I have player components that need to be positioned around a table.
The issue I am having is that the player boxes change when the screen attribute is changed, which is what I want, but the position of the top two is anchored to the top, which causes the players to be moved away from the table. I would rather have the anchor on the bottom, so that they will stay next to the table.
If you're using absolute positioning here, you can do something like:
.player {
top: 200px; /* whatever value you want the bottom of element to be from top */
margin-top: -100%; /* bring the element back up so the bottom is where the top value set above is */
}
That said I'd advise using something like CSS tables or flexbox here.
It is by default that the origin is always located at the top left portion of the element. To achieve your desired results you need to add the height of the element always if you want it to anchor at bottom left like.
elem.X = X;
elem.Y = Y + elem.height;
hope that helps

Scroll bar goes automatically to the top when mouse cursor moves out of the scroll bar line

I am trying to create a Leaflet menu based on the properties of the Layer Control code of Leaflet.
This menu becomes automatically scrollable if it is greater than the space left between the top of menu and the bottom of the map.
Javascript:
var acceptableHeight = this._map._size.y - (this._container.offsetTop + 60);
if (this._form.clientHeight > acceptableHeight) {
this._form.style.height = acceptableHeight + 'px';
L.DomUtil.addClass(this._form, 'menu-scrollbar');
}
else {
L.DomUtil.removeClass(this._form, 'menu-scrollbar');
}
CSS:
.menu-scrollbar {
overflow-y: auto;
padding-right: 10px;
}
The scroll bar is perfectly created depending on the size of the form, but it always moves to the top when the mouse cursor goes out of the scrolling bar zone (that is the line which the bar follows). Something also strange is that the bar stays on the same place only if the mouse is quickly changing its cursor type (such as when located on an HTML input zone).
An image can be better than a long explanation:
screenshot of the menu.
I've been looking around similar problems with the scrolling bar:
"Why the vertical scroll bar moves automatically?"
"Scroll bar goes up"
But the answers are not exactly related to the same issue, and I would like to use pure JavaScript rather than mix it with jQuery. One of the feasible solution could be to get the scroll bar position (how to get it) and set it manually (how to do it).
But I am sure that this problem comes from something else tht i don't get.
Can someone help me with this ?
Fiddle example: http://jsfiddle.net/LnzN2/1121/
Thank you in advance.

Jquery-ui draggable glitch?

Hi I am trying to make a scroll bar (I'm still far from done, link here: http://jsfiddle.net/xD2Hy/24/ ), thing is that when I scroll (using the scroll bar) to the bottom, THEN and I resize the window to make it SMALLER, the scrollbar drowns under the window. To fix this, i tried adding a jquery offset to the scroll bar move it up when i resize. NOW when i scroll to bottom, then i resize, the scroll bar dissapears completely! I really dont know what to do, im still learning javascript, please help. Here's a the offset jquery of the code, check the link of the jsfiddle for the whole thing:
$('#scrollBar').offset({top:100});
It seems you're setting offset to 100px from document's top border. You need to set offset based on scrollbar's parent container offset and height, and scrollbar container's height. Try this instead:
var scrollContainer = $('#cow'),
scrollBar = $('#scrollBar');
scrollBar.offset({ top: scrollContainer.offset().top + scrollContainer.height() - scrollBar.height() });
Updated fiddle.

How to keep div in the center of viewport

I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.

I need help figuring out how to toggle an element once vertical height of window is scrolled

I'm trying to toggle a div from relative to fixed when I scroll down 200px using javascript. When I reach 200px from the top of the window, my div should toggle to fixed. And when I'm above that 200px from the top it should go back to relative. Does anyone have an idea on how to do this?
Something like:
$(window).on('scroll', function() {
$("#myDivID").css({
position: $(this).scrollTop()<200?'relative':'fixed',
top: $(this).scrollTop()<200?'200px':'0px'
});
});
You'll probably also have to reset the top position of the element.
I know there's at least a couple of plugins that do this. Can't remember the name of the one I saw last, but here's one I've written myself: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.fixedIfNeeded.js
You use it like so:
$('#my-element').fixedIfNeeded();
There's one optional argument that specifies if the element should stop being fixed before it reaches another element (like a footer for example):
$('#my-element').fixedIfNeeded('#footer');

Categories