I have come upon an interesting problem. I am using jquery to animate scrolltop property of html and body tags to perform smooth scroll. It works nicely, but in MS Edge appears horizontal scrollbar (Mac, no problem, nothing is overflowing to sides :/ ). So to prevent this behavior, I have set overflow-x: hidden to body and html tags. The horizontal scrollbar disappeared. HOWEVER my smooth scroll isn't working how it should. Whenever you click the button to scroll down while you are not right at the top of page, the view jumps to the top and moreover it didn't scroll to requested place.
Here is website where you can see it. Click on PRO MUŽE or PRO ŽENY (at center of top section). http://mountiny.com/lab/colourMe/ Do you know why the horizontal scrollbar shows in some windows browsers and in on it doesn't?
Thanks for explanation of animation behavior and also for help with scrollbar.
That's my Javascript (jQuery)
<script type="text/javascript">
var colors = ["red", "purple", "pink"];
var number = Math.floor(Math.random() * 3);
var logo = $(".logo img");
var parfem = $(".parfem img");
var descBg = $(".desc");
var introSection = $(".intro");
var text = $(".introText");
var contentText = $(".content-text");
var lomitko = $("#svgLomitko");
if (number == 0) {
logo.attr("src", "images/colourme_logo_cervena.png");
parfem.attr("src", "images/colourme_cervena.png");
introSection.css("backgroundColor", "#D2232A");
contentText.css("backgroundColor", "#D2232A");
descBg.css("backgroundColor", "rgba(210, 35, 42, 0.7)");
text.css("color", "#981A26");
lomitko.css("stroke", "#981A26");
// alert("red");
}else if(number == 1) {
logo.attr("src", "images/colourme_logo_fialova.png");
parfem.attr("src", "images/colourme_fialova.png");
introSection.css("backgroundColor", "#8568A2");
contentText.css("backgroundColor", "#8568A2");
descBg.css("backgroundColor", "rgba(159, 133, 181, 0.7)");
text.css("color", "#3F325D");
lomitko.css("stroke", "#3F325D");
// alert("purple");
} else {
logo.attr("src", "images/colourme_logo_ruzova.png");
parfem.attr("src", "images/colourme_ruzova.png");
introSection.css("backgroundColor", "#F37FB2");
contentText.css("backgroundColor", "#F37FB2");
descBg.css("backgroundColor", "rgba(244, 152, 193, 0.7)");
text.css("color", "#C5568F");
lomitko.css("stroke", "#C5568F");
// alert("pink");
}
$("#scrollTop").on("click", function(e){
e.preventDefault();
smoothScroll($("html"));
})
function smoothScroll(target) {
$('body,html').animate(
{'scrollTop':target.offset().top},
600
);
}
$(document).ready(function(){
// if ($(".mobile-info").css("display") != "none") {
$(".vyber").on("click", function(){
smoothScroll($(".offer"));
})
// }
$("#open-info").click(function(e){
e.preventDefault();
$(".cross").css("display", "block");
// $(".content-text").css("display", "block");
$(".content-text").toggleClass("display-block");
$(".content-text").animate(function(){
opacity: 1
}, 300, function(){
$(".content-text").css("opacity", "1");
})
});
$(".cross").click(function(){
$(".content-text").animate(function(){
opacity: 0
}, 300, function(){
$(".content-text").css("opacity", "0");
});
setTimeout(function(){
$(".content-text").toggleClass("display-block");
$(".content-text").css("opacity", "1");
$(".cross").css("display", "none");
}, 300);
});
$(".par").click(function(){
// alert("asd");
if ($(".desc").hasClass("selected")) {
if ($(this).find(".desc").hasClass("selected")) {
$(this).find(".desc").removeClass("selected");
return;
};
$(".selected").removeClass("selected");
};
$(this).find(".desc").addClass("selected");
})
$("div.vyber a").click(function(e){
e.preventDefault();
if ($("div.vyber a").hasClass("selected")) {
// alert("asd");
if ($(this).hasClass("selected")) {
$("div.vyber a.selected").removeClass("selected");
// return;
} else {
$("div.vyber a.selected").removeClass("selected");
$(this).addClass("selected");
}
} else {
// alert("asd");
$(this).addClass("selected");
}
if ($(".zeny a").hasClass("selected")) {
$(".proZeny").removeClass("active");
$(".proMuze").addClass("active");
} else if($(".muzi a").hasClass("selected")) {
$(".proMuze").removeClass("active");
$(".proZeny").addClass("active");
} else {
$(".proMuze").removeClass("active");
$(".proZeny").removeClass("active");
};
})
// $(".offer:not(.desc)").click(function(){
// alert("as");
// if ($(".desc").hasClass("selected")) {
// $(".selected").removeClass("selected");
// };
// })
})
</script>
Your code works good.
The problem, must be in your CSS file.
I suspect that you set html and body height to 100% if yes, remove it or use min-height instead.
If you set the html and body height to 100%, the browser consider 100% the visible space, so you can't scroll anywhere because the space that you can see is the already 100% because you forced this in your css. Your document is contained in the body, if you set the body height to 100% what do you expect to see if your document height is greater than the visible space?
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments