I need to scroll in a window but my window height is too small to scroll. Is it possible to scroll when the height of container is too small to see the scrollbar.
Here is my code to scroll:
setTimeout(function(){
$(window).scrollTop($(window).scrollTop()+1);
$(window).scrollTop($(window).scrollTop()-1);
}, 800);
I need to scroll window or body even if height of it is less than 100px.
I believe you want to set a min-height of 110% on html in your CSS. I would do:
html {
min-height: 110%;
}
Here's a demo: http://jsbin.com/sebago/1/edit?html,css,output
If you define a fixed height in your element, then you can use overflow:scroll to enable scroll.
You need first hide the scroll bar to do not take space (because you don't have too much space in the element), you can make that with the next css:
#elementId{
overflow: hidden;
}
Then you need to bind the mousewheel event over the 'small' element and trigger a function to manually scroll your element, you can do that with the next jQuery code:
$('#elementId').bind('DOMMouseScroll mousewheel', function(e) {
$('#elementId').scrollTop($('#elementId').scrollTop()+1);
});
This example is simplified just to bind the mousewheel event in general, to know if it is up or down you can use the jQuery Mouse Wheel Plugin that you can get here.
To see scrollbar, just use CSS property overflow:scroll; on your container.
Related
So I have an element that resides at the bottom of my list using:
position: sticky;
bottom: 0;
And I am using scrollIntoView(true) to scroll to it. There is two problems though.
It scrolls first to a position where the sticky element in in its original position. Not stickied to the bottom. Then you have to fire the scrollIntoView once again so it scrolls the element to the top.
ScrollIntoView scrolls the whole window too even though the element is inside a scrollable container.
I can't find a solution for either problem. My goal is to have a sticky element and be able to align it to the top when clicking it. I am using Angular but I don't really think that matters.
The solution was:
scrollTo(container: HTMLUListElement, header: HTMLLIElement) {
container.scrollTo(0, header.offsetTop);
container.scrollTo(0, header.offsetTop);
}
It's important that you neither use smooth scrolling in the scrollTo function or scroll-behavior: "smooth" in CSS.
And don't forget to add position: relative to the container.
I have a strange problem that happens when I animate the width of a relative positioned element which contains an absolute element. While the animation is running, inner element dissapears. When the animation is complete, inner element shows.
Here is the demo:
http://jsfiddle.net/R4Cj5/
When I remove parent element position: relative then inner element is shown while animation is running, but then I can't position it relatively to the parent.
Basically box with the % should be visible al the time
Does anyone have any idea whats happening here?
FIXED : I just added overflow: visible !important; to relative
positioned element
working example : http://jsfiddle.net/R4Cj5/26/
I think it might be a jQuery animate thing. I would love to see a working solution without any hacks, but for now here is something you might find useful! :-)
I basically added another function in the animate, upon completion it will animate the 90% to hover above the progress-bar
complete: function() {
$percent.animate({top: "-26px"})
}
in this use-case scenario, you can also remove/comment out the top: -26px from .progressbar .percent in the stylesheet. Also I added height: 20px; to the styling for .progressbar .percentage so you could see the % change as it glides across.
I have a web page with scrollable div on it.
On top of scrollable div I have absolutely positioned div that overlaps half of scrollable div.
When I put mouse cursor over scrollable div I can scroll it with mouse wheel. But when I move cursor over overlapping div then mouse wheel stops scroll that div (and this is correct behavior because absolute positioned div is not inside scrollable div).
Question: how to pass or dispatch scroll event received by absolute positioned div to this underlying scrollable div to make this absolute positioned div 'transparent' for mouse wheel events.
I could get it work in Chrome, but not in IE and Firefox. How to rewrite this code to get it work in IE and Firefox?
if ($.browser.webkit) {
$(".overlap-container").bind("mousewheel", function (e) {
var origEvent = e.originalEvent;
var evt = document.createEvent("WheelEvent");
evt.initWebKitWheelEvent(
origEvent.wheelDeltaX,
origEvent.wheelDeltaY,
window,
0,
0,
0,
0,
origEvent.ctrlKey,
origEvent.altKey,
origEvent.shiftKey,
origEvent.metaKey);
$(".scroll-container").get(0).dispatchEvent(evt);
});
}
See example here:
http://jsfiddle.net/HAc4K/5
EDITED: This issue originally is from jqGrid - frozen columns don't react mouse wheel scrolling.
In Chrome and Firefox awesome CSS property is supported: pointer-events:none
Looks like a known issue with jQuery: OriginalEvent not supported in IE
The short answer: you use wrong parameters of initWheelEvent in the demo in case of usage Internet Explorer. The method should have 16 parameters described in the documentation. Yo use currently only 11 parameters the same which have initWebKitWheelEvent, but the meaning of all parameters of initWheelEvent is absolutely another. You have to fix the parameters of initWheelEvent.
Use RetargetMouseScroll(overlap container, scroll container).
I realize this isn't exactly what you're looking for, but at least in Chrome, IE7+, and Firefox 3.5+ this does what you ask - scroll the underlying div when the div overlaying it receives scroll events:
http://jsfiddle.net/b9chris/yM3qs/
It's doing so simply because the overlapping div is a child of the div it overlaps - no jquery passing on any mousewheel events (although it is listening to scroll to ensure the overlapping div stays where it needs to be).
Implementing that kind of workaround in jqGrid might require upending a fair bit of code there, however.
HTML:
<div id=under>
(content goes here)
<div id=over></div>
</div>
CSS:
#under {
position: absolute;
left: 0; top: 0;
width: 220px; height: 200px;
overflow-y: scroll;
}
#over {
position: absolute;
left: 1px; top: 100px;
width: 200px; height: 100px;
z-index: 2;
}
JS:
(function() {
$('#under').on('scroll', function() {
$('#over').css('top', $(this).scrollTop() + 100);
});
})();
Here's the 2019 solution for overlapped container to get wheel event:
document.querySelector('.overlap').on('wheel', (e) => {
const overlap = e.target
overlap.style.pointerEvents = 'none'
setTimeout(() => {overlap.style.pointerEvents = 'auto'}, 0)
})
This way the overlapped element gets wheel event from the overlapping element called .overlap.
I've created an effect whereby an HTML element is initially hidden behind another HTML element, and the CSS 'top' value of the hidden element is animated to expose it from beneath the masking element in a smooth sliding motion.
Does anyone know if there is a way to recreate this effect without the masking element on top?
I want to avoid the jQuery'esque slideDown where the height of the element being shown is animated.
I have the feeling that this just isn't possible, but if someone is otherwise aware, your advise would be much appreciated.
You can easily do this with a wrapper that has overflow set to hidden
http://jsfiddle.net/xvNf6/1/
HTML
<div id="wrapper" style="height:0px;">
<div>content</div>
</div>
Sample CSS
#wrapper{width:300px;height:280px;margin:0 auto; overflow:hidden; background:#eee}
Javascript
//if you must not use jQuery
var animationTimer = setInterval(function(){
var wrapper = document.getElementById("wrapper");
wrapper.style.height = (parseInt(wrapper.style.height) + 1) + "px";
if(parseInt(wrapper.style.height) >= 280)
clearInterval(animationTimer)
},1);
//if you can use jQuery
$("#wrapper").animate({height:"280px"},1000);
Place your element within a parent div with overflow:hidden. Then, position your element beyond bounds of the parent div so that it is hidden.
#wrapper { overflow: hidden; }
#target { height: 100px; top: -100px; } /* shift element out of view */
You can then reveal it by animating to {"top":0} to get the slidedown effect that doesn't resize the height of the element.
Here's a rather crude demo: http://jsfiddle.net/7RSWZ/
Update: Here's another demo that attempts to deal better with different content sizes by dynamically setting the heights and top values. http://jsfiddle.net/7RSWZ/2/
I have coded my div to re size and change margin on click of a div with id = switch. But it is disappearing on beginning of animation and reappear on the completion of animation. Ypu can see my fiddle here. Why is this happening and how can I avoid this??
Thanks in advance...:)
blasteralfred
Add
overflow: visible !important;
to #sidebar and#switch won't disappear during the animation.
It is happening because it is hidden underneath your "viewer". If you can move your switch inside the "viewer" and float it left, set margin-left. Should fix it.
During the animation the elements overflow is set to "hidden".
As #switch is visually placed outside #sidebar it disappears. Christopher's solution should override it.
It also would'nt happen if you place #switch inside #viewer