如果 html，正文溢出-x：隐藏，则 ScrollTop 动画不起作用

Question

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

这是您可以看到的网站。单击 PRO MUŽE 或 PRO ŽENY（在顶部的中心）。 http://mountiny.com/lab/colourMe/ 您知道为什么水平滚动条在某些 windows 浏览器中显示而在其他浏览器中却不显示吗？

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

那是我的 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>

Answer 1

您的代码运行良好。

问题，一定在您的 CSS 文件中。

I suspect that you set html and body height to 100% if yes, remove it or use min-height instead.

如果您将 html 和 body 高度设置为 100%，浏览器会认为 100% 可见 space，因此您无法滚动到任何地方，因为您 space可以看到已经是 100% 因为你在你的 css 中强制这样做了。您的文档包含在正文中，如果您将正文高度设置为 100%，如果您的文档高度大于可见 space，您希望看到什么？

如果 html，正文溢出-x：隐藏，则 ScrollTop 动画不起作用

ScrollTop animate does not work if html, body is overflow-x: hidden

html

css

jquery

scroll

overflow