I want my body not to scroll if 'not-scroll' class is appended on it, otherwise it should work normally.
I have been searching for this problem for 2 days, but can't find any solution working for me.
What I want is to add a class to body, and it should not scroll if any one try to scroll on it. But every other element should scroll, if scrolling is possible in them.
I have already read so many stackoverflow answers, but nothing is workable for me. I have checked out, solution 1,solution 2,solution 3,solution 4 and many others..
PS: Actually, I am implementing fancybox in my application, which opens a model screen on the body, now if user tries to scroll on the model, body behind the model view scrolls. I want to prevent this.
I have tried this.
$(document).on('touchmove',function(event) {
if($('body').hasClass('no-scroll')) {
event.preventDefault();
}
});
but it also prevents scrolling inside model view. Any help would be appreciated!!
Thanks in advance.
Scenario is like shown in picture, captured form iPad mini
To prevent scrolling you can specify
body{
overflow:hidden;
}
To allow scrolling to any other div inside body
div{
overflow-y:scroll;
}
You can use overflow-y property for vertical , overflow-x property for horizontal or overflow property for both
As suggested by adeneo, set overflow to hidden on body on activating the modal.
$('body').css('overflow','hidden'); //set overflow hidden
And when the dialog box closes, add overflow as auto
EDIT: Also, try preventing scroll on overlay ('.fancybox-overlay') rather than body
EDIT-2: Try to include whole of your content inside a wrapper and scroll that instead of the body.(refer THIS).
Related
I am using fullpage.js
https://github.com/alvarotrigo/fullPage.js/
on a frontpage of a website and it´s working fine so far.
I have 4 Sections.
The first section has more content than the height of the browser window, so there is the need to scroll inside that section.
I have added the scrollbar and it works with the scrollbar and by using the mousewheel.
Now my problem.
I have a sticky header which I want to reduce in height as soon as there is any scrolling down inside this section (and increase in height as soon as I scroll back up to the top).
So I would like to add the css class "sticky" to the "header" when using the scrollbar of the fullpage.js or the mousewheel so that I can format the header with the class "sticky" differently with css.
Unfortunately the "scroll-Events" doesn´t work here, as already mentioned here:
FullPage.JS Scrolling
I tried the following
$(function(){
window.addEventListener("wheel", function() {
$(document).ready(function(){
var scrollclass = $('.slimScrollBar').position();
if(scrollclass.top > 0){
$('header').addClass('sticky');
}
else{
$('header').removeClass('sticky');
}
});
});})
This kind of works, however the sticky class is not added by the first use of the mousewheel (it´s added by the "second turn of the mousewheel") and is not beeing removed when scrolling back to the top, I need to turn the wheel an additional time after scrolling back to the top to have the sticky class removed again.
If I change the if-statement to >= 0 it works on the first turn of the mousewheel but then I don´t get the class removed when scrolling back to the top.
The second issue is, that this only works by using the mousewheel of course, and not by dragging the scrollbar created by fullpage.js
Any ideas or hints how to solve this?
Thanks
John
you could use the "afterLoad" method, as noted in fullPage.JS's documentation:
https://github.com/alvarotrigo/fullPage.js#afterload-anchorlink-index
I got a centered Layout including a max-width and margin: 0 auto;. Furthermore i am currently using Isotope for filtering and sorting a grid.
The Problem is: There is the possibility that the height of the body / main container becomes smaller than the actual window height and therefor of course removes the scrollbar, since the body has overflow: hidden. The centered layout jumps (because of the margin: 0 auto), which doesn't look very great.
The Question: Is there a callback function from Isotope where i could test if the scrollbar is shown or not? Or is there even a possibility to bind a function on the body when the scrollbar disappears? what is the best method to check if there is a scrollbar visible or not? (EDIT// as suggested an easy method is $(document).height > $(window).height, now i just need a triggered event to call the if statement)
Thanks in advance!
EDIT here is a LINK TO FIDDLE to play around
So I'm trying to have a div slide in on pageload. It has an id of "#crazyslide" and is absolutely positioned to the right -800px in the css.
So I used this code in the head:
<script type="text/javascript">
$(document).ready(function() {
$("#crazyslide").animate( { right: '0px' }, 2000 );
});
</script>
Shouldn't this work?
No, you can't hide it off the edge of the screen. Devices like mobiles will let people scroll past the edge and it will look bad.
I recommend using this example of hiding and showing it with javascript.
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
Yes it should. I just tested with your exact code, and it worked fine. There are ways to prevent a parent element from showing scroll bars for offscreen content.
Check to be sure your div is properly named: (console.log($("#crazyslide"));
Be sure a parent element's css isn't preventing the div from being
shown at all, such as a strange body width or something.
Be sure the div has content, and a set width.
*This turned out to be a load order issue where jquery was not yet defined when the animation code was called.
I have a div inside a main div having following properties:
#inner {
width:149px;
overflow:auto; //Note this
margin:35px 0 0 0;
height:575px;
display:none;
}
on main div I am calling two functions on two events (onmouseover & onmouseout). On mouseover inner div displays with scrollbars. It seems whenever the mouse is moved off the scrollbar into the DIV after it being scrolled down, the DIV returns to the top.
You can find the code here: [a link] http://www.designworks.com.pk/example/
Please test in IE & chrome when we scroll down the DIV returns to the top. Please help me to solve this issue.
I don't have time to fully investigate it at the moment, but I believe it is caused by one of the strange behaviors of mouseover/mouseout that occur with child elements.
If jquery is an option, using hover deals with a lot of these issues and seems to fix your problem:
http://jsfiddle.net/ZJBXX/13/
EDIT: Note this is working off of the fiddle posted in the comments and may not be exactly the same as your current code.
i'm trying to slide a div element from outside the page to within the page. However as soon as the element is shown outside the page, horizontal scrollbars appear!
How can I achieve this without the scrollbars appearing?
Any help appreciated very muchly, thanks :)
Briefly, using overflow-x:
function moveStuff() {
$('body').css('overflow-x', 'hidden');
$('#iteminmotion').show().animate(..., function() {
$('body').css('overflow-x', 'auto');
});
}
move the element off the page to the left, moving it off to the right increases the width of the page
You could temporarily turn off side scrolling by applying this css to the body:
body {overflow-x:hidden;}
http://jsfiddle.net/pxfunc/YYUZJ/
Do you really need to construct the element off page, or just make it look like it slides onto the screen? Ive done similar things in the past to emulate a graphic that slides across a page, but instead of starting outside the view area I've created it as far to the side as possible and then animated the slide to the middle. The user experience at that point can be a graphic that slides onto a page from outside the view area.