I have my html page with a iframe, and when I put the mouse on the iframe and I use the mouse scroll button it will scroll the iframe page and I don't want that to happen. But I don't want the scroll to be totaly disable in this iframe because I have a fresque and I must be abble to zoom in with the scroll
How could I do ?
I have try to do scrollTo(0, 0); but it does it on the real page and not on the iframe.
You can try to use the mousewheel event to cancel the scroll.
Example code:
window.onload=function(){
setTimeout(function(){ //just to be sure that the document exists
document.onmousewheel=function(event){
event.preventDefault();
//add here your code to zoom
};
},300);
};
Notice that IE8 will always "internally" use event.preventDefault(); and the scroll won't work if you want to use a flag to enable/disable the scroll.
You can read more information here: http://www.quirksmode.org/dom/events/scroll.html
This is my old solution:
The question isn't specific enough, but I think I understood it.
Here is a piece of jQuery to fix what I understood:
(function($){
$(function(){
$(window).click(function(event){
if(event.which==3) //middle button
{
event.preventDefault();
//remaining code for the zoom(?)
}
});
});
})(jQuery);
This should disable using the scroll wheel to scroll the page (doesn't work on touch).
You can include the code for the zooming(?) inside the if block.
Include this code inside the iframe!
Try using the scrolling="no" option, as in
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
Assuming: "I want to disable the scroll of the page without disabeling the scroll (in the iframe)"
First, this CSS will turn off scrollbars on the page ...
<style type="text/css">
html, body {
overflow: hidden;
}
</style>
... and, this will disable scrolling anytime it is tried ...
$(window).scroll(function() {
scroll(0,0);
});
... although, this might be a better option ...
document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;
Related
When vertical scrollbar appears on the page, windows resize event need to be triggered. Is there any way to capture scrollbar appearance event using javascript?
I'm having problem with the width of the page as it makes div to jump to next line when the vertical scrollbar appears. It seems to work fine when I resize page, so I want to trigger resize event manually when vertical scrollbar appears.
You could use setInterval to monitor for the scrollbar. If the document width exceeds the window width, you can trigger the window.resize event manually.
function checkForScrollbar() {
if ($(window).width() < $(document).width()) {
$(window).trigger('resize');
}
}
$(document).ready(function() {
setInterval(function() { checkForScrollbar(); }, 500);
$(window).on('resize', function() {
//Resize triggered.
//Do Your Stuff
});
});
See this JS Fiddle: http://jsfiddle.net/USvsW/9/
OrganicPanda has posted a clever solution without the need for a timer. Basically he places an iFrame with 100% somewhere and listens to 'resize' events on it:
Detect when window vertical scrollbar appears
u can use this:this will through alert on resize
$(window).on('load resize', function(){
var w1 = $(window).width();
alert(w1);
})
I have a Fancy Box Popup , it has a long page which scrolls, but I want it to scroll up to the header Div on top of that popup when i click on Go to top button. How can i force it to scroll.
Here is my code for scrolling :
<script>
$('#goTop').click(function (){
$('html, body').animate({scrollTop:$(".wrap").offset().top}, 750);
return false;
});
</script>
Why is it not scrolling, there are no errors in console , plus i have used the code on normal page , it works there . but it doesnot works in fancy box. Any solution ?
Here is the Image of my Popup :
You need to scroll the actual modal window, not the document's <body>.
$('#goTop').click(function (){
$(this).closest('.fancybox-inner').animate({scrollTop: 0}, 750);
return false;
});
Where fancybox-inner is the class given to the fancybox which has a fixed height and CSS overflow-y: scroll.
$('.fancybox-overlay').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#div").offset().top
});
I'm currently developing the frontend of a website which is single page with smooth scrolling between divs.
I want to disable scrolling by mouse itself.
I know overflow:hidden; removes the scroll bars, however, I want the page to scroll only when they click on the link to the required div. What is the correct way to go about it?
Try this:
<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('DOMMouseScroll',wheel,false);
}
function wheel(event)
{
event.preventDefault();
event.returnValue=false;
}
window.onmousewheel=document.onmousewheel=wheel;
</script>
How can I determine the possibility of horizontal scrolling by clicking the mouse wheel and disable it in the element with overflow-x:hidden (using JavaScript or jQuery)? Scrolling is impossible in Firefox but possible in IE, Chrome and Safari. Code example:
<div style="overflow-x:hidden; overflow-y:auto;">...</div>
Screenshots:
Perfectly possible, but not best practise (I presume you have a really good reason for wanting to do it, though):
$('#yourDivId').on('scroll', function(){
$('#container').scrollLeft(0);
});
See http://jsfiddle.net/q5CTS/3/ for a working snippet.
you can disble it with jQuery :
$(document).ready(function(){
$('.parent').bind('mousewheel', function(event, delta) {
return false;
});
});
The class parant is parent div.
I have an iframe from the middle to bottom on a page. When I load the page it scrolls to the bottom. I tried to body onload window.scroll(0,0) but it does an ugly effect because it first goes down and then immediately scrolls up.
What's the cause of this automatic scroll to bottom with iframe on the page?
This is just a random one, but possible doing something like this:
<iframe style="display: none;" onload="this.style.display='block';" src="..."></iframe>
The thinking being that if it is some focus stealing script on a remote page that you can't control, the browser won't focus a hidden element. And there's a good likelihood that your onload will fire after their focus changing script.
Or, one other option that might be a bit more reliable:
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="..."></iframe>
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.
Of course, without knowing more, it's hard to say for sure which tradeoffs are okay, and both of these options have conditions that are a tad racy, so YMMV.
I hope that helps :)
I came up with a "hack" that works well. Use this if you don't want your webpage to be scrolled to anywhere except the top:
// prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;
window.scrollTo = function scrollTo (x, y) {
if (y === 0) {
originalScrollTo.call(this, x, y);
}
}
If you want to disable autoscrolling completely, just redefine the function to a no-op:
window.scrollTo = function () {};
Similar method but using classes.. I added a class to the iFrame's parent div of "iframe_display" with a style inside that of visibility: hidden. On page load I then used jQuery to remove the class
.iframe_display{visibility:hidden}
$(function(){
$('#iframe_wrapper').removeClass('iframe_display');
});
This takes the focus away from the iFrame and stops the scrolling down to the iFrame on page load
Simple. Use about:blank in src like
<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>
The src="about:blank" trick provided by Leandro & edited by Spokey worked for me, but I'd like to share a workaround I was using before.
A temporary solution I found was to embed the iframe in the uppermost element on my page (nav, header etc), so that even if the browser wants to jump to focus, it 'jumps' to the top element. This still can cause a slightly perceptible jump, which might bug you.
To make sure the iframe remains hidden if you choose to place it near the top of a page, I applied an inline style of style="visibility:hidden; height: 0px; width: 0px;". I guess you could also use a z-index combo.
This seems to work well:
<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>
This is the solution I came up with and tested in Chrome.
We have an iframe wrapped by a div element. To keep it short, I have removed the class names related to sizing the iframe. Here, the point is onMyFrameLoad function will be called when iframe is loaded completely.
<div class="...">
<iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>
Then in your js file, you need this;
function noscroll() {
window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noscroll);
function onMyFrameLoad() {
setTimeout(function () {
// Remove the scroll disabling listener (to enable scrolling again)
window.removeEventListener('scroll', noscroll);
}, 1000);
}
This way, all the scroll events become ineffective till iframe is loaded.
After iframe is loaded, we wait 1 sec to make sure all the scroll events (from iframe) are nullified/consumed.
This is not an ideal way to solve your problem if your iframe source is slow. Then you have to wait longer by increasing the waiting time in setTimeout function.
I got the initial concept from https://davidwells.io/snippets/disable-scrolling-with-javascript/