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

Vít Horáček

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>
Vixed

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.

screen height

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.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

$('html body').animate({ scrollTop: not working in Firefox

From Dev

Links in footer unclickable (bottom-fixed and behind content) when overflow-x is hidden for html and body

From Dev

overflow:hidden doesn't work on .animate() to the left, but works to the right?

From Dev

Overflow hidden doesn't work on firefox, but does work in IE and chrome

From Dev

Is scrollTop, and scrollLeft for overflow hidden elements reliable?

From Dev

Overflow: hidden not work

From Dev

scrollTop() !== does not work

From Dev

Why does x-overflow:hidden cause extra space below?

From Dev

use scrollTop in Aside not the html,body

From Dev

difference between $('html, body').animate and $('body').animate?

From Dev

animate scrollTop doesn't work on Chrome?

From Dev

Trying to make overflow: hidden work

From Dev

Trying to make overflow: hidden work

From Dev

overflow-x:hidden on body tag...good idea/bad idea

From Dev

HTML, Body height 100% does not work

From Dev

Overflow y hidden breaks overflow x visible

From Dev

Floats and overflow-x: hidden;

From Dev

Body overflow:hidden disables scroll by mouse wheel

From Dev

@Html.HiddenFor(x => x.Id) Does not work, but <input type="hidden" value = @Model.Id> works. Why?

From Dev

scrollTop = scrollHeight does not work in Chrome

From Dev

overflow-x: hidden doesn't work, instead adds padding on the right when scrolled

From Dev

Using overflow:hidden on <object> tag does not work in Internet Explorer 9 and above

From Dev

Why margins don't work in Internet Explorer with html5 & overflow:hidden?

From Dev

can overflow: hidden; work with inline-blocks?

From Dev

Can't get "overflow: hidden" to work on image

From Dev

How do get overflow hidden to work

From Dev

Overflow:hidden full width div doesnt work

From Dev

can overflow: hidden; work with inline-blocks?

From Dev

Why doesnt it work without overflow hidden?

Related Related

  1. 1

    $('html body').animate({ scrollTop: not working in Firefox

  2. 2

    Links in footer unclickable (bottom-fixed and behind content) when overflow-x is hidden for html and body

  3. 3

    overflow:hidden doesn't work on .animate() to the left, but works to the right?

  4. 4

    Overflow hidden doesn't work on firefox, but does work in IE and chrome

  5. 5

    Is scrollTop, and scrollLeft for overflow hidden elements reliable?

  6. 6

    Overflow: hidden not work

  7. 7

    scrollTop() !== does not work

  8. 8

    Why does x-overflow:hidden cause extra space below?

  9. 9

    use scrollTop in Aside not the html,body

  10. 10

    difference between $('html, body').animate and $('body').animate?

  11. 11

    animate scrollTop doesn't work on Chrome?

  12. 12

    Trying to make overflow: hidden work

  13. 13

    Trying to make overflow: hidden work

  14. 14

    overflow-x:hidden on body tag...good idea/bad idea

  15. 15

    HTML, Body height 100% does not work

  16. 16

    Overflow y hidden breaks overflow x visible

  17. 17

    Floats and overflow-x: hidden;

  18. 18

    Body overflow:hidden disables scroll by mouse wheel

  19. 19

    @Html.HiddenFor(x => x.Id) Does not work, but <input type="hidden" value = @Model.Id> works. Why?

  20. 20

    scrollTop = scrollHeight does not work in Chrome

  21. 21

    overflow-x: hidden doesn't work, instead adds padding on the right when scrolled

  22. 22

    Using overflow:hidden on <object> tag does not work in Internet Explorer 9 and above

  23. 23

    Why margins don't work in Internet Explorer with html5 & overflow:hidden?

  24. 24

    can overflow: hidden; work with inline-blocks?

  25. 25

    Can't get "overflow: hidden" to work on image

  26. 26

    How do get overflow hidden to work

  27. 27

    Overflow:hidden full width div doesnt work

  28. 28

    can overflow: hidden; work with inline-blocks?

  29. 29

    Why doesnt it work without overflow hidden?

HotTag

Archive