How can I let a DOM object such as div be able to scroll with scroll wheel on the mouse or by the arrow keys (like overflow:scroll), but not show the scroll bar (like overflow:hidden)?
You could set bind an event listener to scrolldown / scrollup (via the mousewheel event, looking at event.wheelDelta to calc size and directino of scroll) and manually position an absoluteley positioned div inside another fixed height absolutely / relatively positioned div. So on scroll down you decrease the y position of the inner div, and on scroll up you increase the y position.
For arrow keys, just bind a similar function to keydown event checking for the down / up arrow as appropriate.
I made a jsfiddle exampling this technique here: http://jsfiddle.net/wsmithrill/U7ju8/32/
If you want to skip javascript altogether, you can try what I suggested here.
Basically, have a container div that's slightly narrower than your content div. Have the container set to overflow:hidden, but the content div set to overflow:scroll. If the container is narrower, it will hide the scroll bar.
if may need this to stop scroll down when you reach the top:
var top_val = $("#inner").css("top");
if (top_val.indexOf("-") > -1)
{
$("#inner").css("top", parseInt($("#inner").css("top"), 10) + 5 + "px");
}
Related
So I have a container that has vertical scroll. Within this container I have x amount of inputs and if the user hovers over any of the inputs a tooltip will be shown hovering over on the rightside of input.
The issue that I am seeing is that the tooltips inside of the scrolling container can not have an absolute position that leaves the container. Meaning if the user scrolls over the top input the tooltip will cut off once it hits the top of the scroll container.
I have tried a bunch of things, but nothing seems to work to get this setup to work properly. Z-index does not seem to allow me to get out of the scrolling container.
Sorry this isn't a perfect example, but basically you can see that the tooltips are confined into scroll container:
http://cssdeck.com/labs/6aijimdf
Expected results:
I have a scroll area in which there is an absolute positioned element that will leave the scroll area when it overflows it.
Actual results:
I have a scroll area in which the absolute positioned element can not leave the scroll area when it overflows it.
Since tool tip container is position: relative and overflow: scroll, there is no way an position: absolute element can leave it.
I think a better way to achieve your expectation is using javascript to controll the tool tip element's position, and using position: fixed for that.
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
I'm using bootstrap. I want a div element to move as I scroll the page downwards. How do I accomplish this please? For instance, I want the div element to follow me downwards as I scroll downwards and still maintain its position
This can accomplished with functionality jQuery plugin.
See more on the API call here
This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.
Using CSS, you can do it with the position attribute.
div{
position: fixed;
}
I have a <select> box with many options, and you can scroll through these. When you scroll to the bottom of the options list and continue scrolling, the scrolling "overflows" into the parent window, and scrolls the window down instead. Is there a way to turn this off, i.e. when you scroll to the bottom scrolling down is disabled?
Here is a fiddle. To get the effect I describe, mouse over the multiple select and scroll down (using the trackpad, scroll wheel, etc) to the bottom, then continue scrolling. The entire page will scroll. My desired behavior is for the entire page not to scroll when you reach the bottom of the select options.
The only way to achieve what you want is to use javascript. The logic is pretty simple, on hover, you can add overflow: hidden; to the body, then onblur of the select element, you remove the overflow value.
The code would look something like this (give your select box an id of selectbox):
document.getElementById('selectbox').onmouseenter = function(){
document.body.style.overflow = 'hidden';
};
document.getElementById('selectbox').onmouseout = function(){
document.body.style.overflow = 'auto';
};
demo: http://jsfiddle.net/LRCKn/6/ - you just need to get it to apply the css change on the options elements as well.
I currently have an image in a div that's set to fixed, and I like how its behaving, however I want it also to behave as if it's absolute when scrolling up and down. So in other words, I want fixed behavior horizontally, but absolute vertically (so that I add content to it and can scroll down and see the whole image).
Hopefully, I'm clear. Heres my html:
<div id="graphpaper">
<img src="Background2.jpg" />
</div>
My css:
#graphpaper{
position:fixed;
left:50%;
margin-left:-800px;
width:1600px;
height:1600px;
z-index:-10;
}
This is not an easy topic. The only way to achieve it is to use javascript. You have to 2 ways to do this.
Use position fixed and hook to windows scroll event and change the vertical position with javascript on scroll
Use position absolute (so the image scrolls with the window) and again with javascript on horizontal scroll change the horizontal location.
A basic example (it won't work, but this is what you need to start with):
$(window).scroll(function(){
$('#fixedImage').css('top', $(window).scrollTop());
});
Thanks for your help. I found the solution: This essentially will move the fixed div up (notice the negation sign in front of scrollVar) which will resemble an absolute scrollable behavoir.
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal >= 0) {
$('#graphpaper').css({'position':'fixed','top' :-scrollVal});
}
});
});