I have a small problem with a short jQuery script.
I would like to create a simple scroll system, between 100% height section on my page.
I tried it, but there's a strange problem when using animate() jQuery function.
I've uploaded files on a server : http://www.fitnessmith.fr/test/
Try navigating through sections with links on right, and you'll see what I mean.
Here's the code used to create animations
$("nav#menu li a").on("click", function(e){
e.preventDefault();
var href = $(this).attr("href");
$('html, body').animate({scrollTop:$(href).offset().top}, 600, 'easeInExpo');
});
Does anyone has an idea to solve it ? thanks for your help
The problem is that you are applying overflow: hidden to both html and body elements. If you remove the overflow from your html,body rule, only the document body element will be overflow:hidden by virtue of your specific body rule.
The reason why this happened is that when you animated the scrollTop property of both html and body, due to neither having overflow and thus unable to truly scroll, what changed was the content of body relative to their offset parent.
You can see this in action if you called $('#about').offset() after clicking the link once. It reports a top position of 0! What has happened is that the "top" of your page has simply moved up in order to scroll the content to the viewport while maintaining no overflow. $('#home').offset() reports a large negative top at that point to indicate this.
By removing the html,body { overflow: hidden; } rule, you are allowing the content to be scrolled against a container while the more specific body { overflow: hidden; } rule hides the scrollbars.
Related
It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this
It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.
Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work
I have a fixed box at the footer of a product page, which is working fine now with this fix applied:
html, body {
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100%;
}
As it fixed the problem on iPhone where you focused in the QTY input field and it pulled it down to the bottom of the page; that fix above now sorted that and works perfect!
However, the accordion tabs on the page dont work a expected, if I remove that fix for the other issue they work but with they don't.
I think it might be easier to do a fix for the scrollto tab as I have searched and read about the fix focus issue; what it does when you click a tab now is just goes to the top of the page and does not scroll to the active tab. Here is the function:
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}
I am sure it is the html, body its trying to animate and scroll so anyone know what I can maybe change to this to get both working?
Maybe only set those styles / fix on html, body when input focused and remove when not? that might work.
I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.
For reference here is the url http://buildme.co/
I am currently having a issue with my main navbar not switching to fixed as you scroll by it. This is the navbar under the skewed images.
The Following JavaScript code is supposed to be making it do this
// Change To Fixed Header
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 100;
if ($(window).scrollTop() > navHeight) {
$('.main-navbar').addClass('navbar-fixed-top');
}
else {
$('.main-navbar').removeClass('navbar-fixed-top');
}
});
});
However this is not the case and nothing happens.
Here is a example of what I am trying to achieve. http://stanislav.it/tutorials/sticky-navigation/
It looks like you may need to bind the scroll event to the 'body' in your case (the window scroll event wasn't firing when I checked it on your site but the body was)
Edit: Oh wait I think I see...It's the overflow styling you've added to html, body:
html, body {
overflow-x: hidden;
height: 100%;
}
if I get rid of the overflow-x: hidden your code works for me. I know I've had trouble before with the fact that it's not allowed to have one axis allow overflow and the other not (so if you set overflow-x: hidden it may do funny things with the y scrolling)
I've got some javascript which handles opening modal popups on my website, and it also sets the overflow-y property on the <html> element to hidden. In Chrome and IE this works as expected - the scrollbar hides, and the page behind the modal popup remains in the same scroll position. When the popup is closed, overflow-y is set to scroll and the page is in the same state and position as before.
However in Firefox, as soon as overflow-y is changed to hidden the page scroll position jumps to the very top, and so when the popup is closed the view has changed for the user - not ideal.
The problem can be seen on this jsfiddle
Is there any solution for this behaviour?
Don't use overflow: hidden on html, only on body.
I had the same problem but fixed it by removing html.
Instead :
$('body, html').css('overflow', 'hidden');
Do :
$('body').css('overflow', 'hidden');
I had the same issue
after checking it in the inspector window, I noticed that in the reset CSS, HTML is set to
HTML {
overflow-y: scroll;
}
you can fix this by setting it to
HTML {
overflow-y: initial;
}
If you don't want to touch reset CSS or just comment it
plugin and code is absolutely fine
change modal position from absolute to fixed:
#mymodal {
position: fixed
}
There are lots of bugs in the different browsers and the functionality is all over the place so be careful modifying styles on body and html tags.
To solve this issue i had to wrap the body's content into its own element and apply the scrolling restriction on it:
var $content = $('<div/>').append($body.contents()).appendTo($body);
$content.css('overflow-y', 'hidden');
This is the only way i've been able to get this working consistently across different browsers and devices.
I just encountered this problem. My fix was
/**
* Store the scroll top position as applying overflow:hidden to the body makes it jump to 0
* #type int
*/
var scrollTop;
$(selecor).unbind('click.openmenu').on('click.openmenu', function (e) {
// Stuff...
scrollTop = $('body').scrollTop() || $('html').scrollTop();
$('body,html').css({overflow: 'hidden'});
});
$(selector).unbind('click.closemenu').on('click.closemenu', function (e) {
// Stuff
$('body,html').css({overflow: 'initial'}).scrollTop(scrollTop);
});
This however doesn't solve the problem of what happens if a user resize the viewport.
Edit: I just saw your code and you used a link with href="#". That is most likely the cause. I'd suggest removing the href property or use a button for it.
You should consider that this might not be caused by the css itself.
In my case I opened my popup with a link: open popup
So what actually caused the jump to the top was the "#" in the href property of the link.
I removed it and added a noscroll class to my html and body tag:
.noscroll {
overflow: hidden;
}
Keeping the body height 100% from the beginning solved the problem for me.
body{
height:100vh;
overflow:auto;
}
body.with-modal{
overflow:hidden;
}
Use body tag instead of html.
JS Fiddle :- http://jsfiddle.net/SBLgJ/6/
JS Change:-
$(document).ready(function() {
$('#middle a').on('click', function(e) {
e.preventDefault();
$('body').css('overflow-y', 'hidden');
});
});
CSS Change:-
body {
overflow-y:scroll;
}
There is a reported issue for such behavior. (https://github.com/necolas/normalize.css/issues/71)