html隐藏x向滑竿,jquery - ScrollTop animate does not work if html, body is overflow-x: hidden - Stack Over...

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)

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");

// };

// })

})