Question

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

这是您可以看到它的网站。点击PROMUŽ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文件中。

我怀疑您将 html 和 body 身高设置为 100％ 是的，删除它或使用 min-height 代替。

如果你将html和身高设置为100％，浏览器会考虑100％的可见空间，所以你不能在任何地方滚动，因为你可以看到的空间已经是100％，因为你强迫这个你的CSS。如果您将身高设置为100％，您的文档是否包含在正文中，如果您的文档高度大于可见空间，您希望看到什么？

如果html，body是overflow-x：hidden

1 个答案: