html body overflow,如果html，body是overflow-x：hidden

我遇到了一个有趣的问题。我正在使用jquery来动画html和body标签的scrolltop属性来执行平滑滚动。它工作得很好，但在MS Edge中出现水平滚动条(Mac，没问题，没有任何东西溢出到两边：/)。所以为了防止这种行为，我将overflow-x：hidden设置为body和html标签。水平滚动条消失了。然而，我的顺畅滚动不起作用。当您不在页面顶部时单击按钮向下滚动时，视图会跳到顶部，而且它不会滚动到请求的位置。

这是您可以看到它的网站。点击PROMUŽE或PROŽENY(位于顶部中央)。 http://mountiny.com/lab/colourMe/

你知道为什么水平滚动条在某些Windows浏览器中显示，而在它上面却没有吗？

感谢您解释动画行为以及滚动条的帮助。

这是我的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");

// };

// })

})