How do I make the scroll bar work on my entire Chrome page

Asked

Viewed 1,087 times

-1

How do I make the scroll bar work on my full page on Chrome, mozila works normally

<?php
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Home</title>
    <meta http-equiv="content-type" content="text/html;charset=uft-8" />
    <meta name="format-detection" content="telephone=yes">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/camera.css"/>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery-migrate-1.2.1.js"></script>
    <script src="js/jquery.equalheights.js"></script>
    <script src="js/camera.js"></script>
    <!--[if (gt IE 9)|!(IE)]><!-->
    <script src="js/jquery.mobile.customized.min.js"></script>
    <script src="js/wow/wow.js"></script>
    <script>
        $(document).ready(function () {
            if ($('html').hasClass('desktop')) {
                new WOW().init();
            }
        });
    </script>
    <!--<![endif]-->
    <!--[if lt IE 9]>
    <div style=' clear: both; text-align:center; position: relative; background: #fff;'>
        <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
            <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0"
                 height="42" width="820"
                 alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."/>
        </a>
    </div>

    <script src="js/html5shiv.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
    <![endif]-->
    <script>
        //função para ativar o scroll nos navegadores ex: chrome
       window.addEventListener('scroll', () => {
           const scrollable = document.documentElement.scrollHeight - window.innerHeight
           const scrolled = window.scrollY;


           if (Match.ceil(scrolled) === scrollable){
              alert('está com o Scroll funcionando no chrome'!);
    });

    </script>

</head>

<body>
<div class="page">
<!--========================================================
                          HEADER
=========================================================-->
<header id="header">
    <div id="stuck_container">
        <div class="container">
            <div class="row">
                <div class="grid_12">
                    <div class="brand">
                        <h1>
                            <a href="./">
                                <img src="images/logo.png">

                            </a>
                        </h1>
                    </div>

                    <nav>
                        <ul class="sf-menu">
                            <li class="current"><a href="./">Início</a></li>
                            <li>
                                <a class="fa fa-caret-down" href="index-2.html">Produtos</a>
                                <ul>
                                    <li><a href="#">Sistemas para corretoras</a>
                                                                            <ul>
                                            <li><a href="#">SixVox</a></li>
                                            <li><a href="#">SixVox Free Lance</a></li>
                                        </ul></li>
                                    <li><a href="#">Guia Médico</a></li>
                                    <li><a href="#">Implantação de CRM</a></li>
                                </ul>
                            </li>
                            <li><a href="index-3.html">Novidades</a></li>
                            <li><a href="index-1.html">Quem Somos </a></li>

                            <li><a href="index-4.html">Contatos</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>
</div>
<!--========================================================
                          CONTENT
=========================================================-->
<section id="content">
<div class="camera-wrapper">
    <div id="camera" class="camera_wrap">
        <div data-src="images/index-slide01.jpg">
            <div class="camera_caption fadeIn bg_3 color_8">
                <h2 class="text_5">
                    Nossas soluções inteligentes<br/>
                    tornam suas idéias<br/>
                    realidade!
                </h2>

                <p class="text_6">
                    Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
                </p>
                <!--<a class="btn_1" href="#">See all products <span class="fa fa-arrow-circle-o-right"></span></a>-->
            </div>
        </div>
        <div data-src="images/index-slide02.jpg">
            <div class="camera_caption fadeIn bg_4 color_8">
                <h2 class="text_5">
                    Simples. Impressionante. <br/>
                    Inteligente.
                </h2>

                <p class="text_6">
                    Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
                </p>
                <!--<a class="btn_1" href="#">See all products <span class="fa fa-arrow-circle-o-right"></span></a>-->
            </div>
        </div>
        <div data-src="images/index-slide03.jpg">
            <div class="camera_caption fadeIn bg_1 color_6">
                <h2 class="text_5">
                    Uma linha completa de sistemas
                </h2>

                <p class="text_6">
                    Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
                </p>
                <!--<a class="btn_1" href="#">See all products <span class="fa fa-arrow-circle-o-right"></span></a>-->
            </div>
        </div>
    </div>
</div>

<div class="bg_2">
    <div class="container">
        <div class="row">
            <div class="grid_12 wow fadeInLeft">
                <h2 class="header_1 text_7 color_8">
                    Soluções inteligentes para potencializar o seu sucesso. <br/>
                    Vendas - Administração - Gerenciamento - Relacionamento
                </h2>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="grid_12 wow fadeInLeft">
            <h2 class="header_2 text_7 color_6">Soluções IdeiaVox</h2>
        </div>
    </div>
    <div class="row">
        <div class="grid_6 wow fadeInLeft">
            <div class="box_1 bg_1 maxheight">
                <div class="put-right maxheight2">
                    <img src="images/index_img01.jpg" alt="Image 1"/>
                </div>
                <div class="inner">
                    <h3 class="text_8 color_6">
                        <a href="#">Mantenha o foco em seus negócios.</a>
                    </h3>

                    <p class="text_6 color_10">
                        Conheça as soluções da IdeiaVox para empresas. <br/>
                        Oferecemos serviços e valor sem que você precise fazer 
                        um alto investimento em infra estrutura própria.
                    </p>




                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="grid_6  wow fadeInRight">
            <div class="box_1 bg_4 maxheight">
                <div class="bg_image_1 maxheight2"></div>
                <div class="inner">
                    <h3 class="text_8 color_8">
                        <a href="#"><img src="images/sixvox.png" border="0"><br>O sistema das corretoras</a>
                    </h3>

                    <p class="text_6 color_8">
                       Sixvox é a solução mais completa para concessionárias e repasses. O sistema é amplamente utilizado pelo mercado
                        e hoje já atende a corretoras de diversos portes
                    </p>

                    <a class="btn_2 text_3 color_8" href="http://www.sixvox.com.br">
                        Saiba mais
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid_3 md_grid_6  wow fadeInLeft">
            <div class="box_2 bg_3 maxheight1 last-row">
                <h3 class="text_8 color_8">
                    <a href="#">
                        Implantação de CRM- <br/>
                        Suite CRM
                    </a>
                </h3>

                <p class="text_6 color_8">
                   O gerenciamento do relacionamento com clientes e do funil de vendas é um diferencial importante. 
                   Suite CRM é umas das mais conceituadas ferramentas open source para essa finalidade.
                </p>

                <a class="btn_2 text_3 color_8" href="#">Saiba mais</a>
            </div>
        </div>
        <div class="grid_3 md_grid_6  wow fadeInLeft">
            <div class="box_2 bg_2 maxheight1 last-row">
                <h3 class="text_8 color_8">
                    <a href="#">Guia Médico Rio</a>
                </h3>

                <p class="text_6 color_8">
                    Guia Médico.Rio é uma solução para que une os clientes aos prestadores de serviço 
                    ao mesmo tempo que agrega um moderno sistema para marcação de consultas.
                </p>

                <a class="btn_2 text_3 color_8" href="http://guiamedico.rio">Saiba mais</a>
            </div>
        </div>
        <div class="grid_6  wow fadeInRight">
            <div class="box_1 bg_6 last-row">
                <div class="put-right"><img src="images/index_img03.jpg" alt="Image 3"/></div>
                <div class="inner  maxheight1 ">
                    <h3 class="text_8 color_8">
                        <a href="#">TI Centro</a>
                    </h3>

                    <p class="text_6 color_8">
                        Suporte em informática é oferecido para empresas através da TI Centro. 
                        Se sua empresa necessita de suporte em informática entre em contato conosco.
                    </p>

                    <a class="btn_2 text_3 color_8" href="http://www.ticentro.com.br">Saiba mais</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid_12 wow fadeInLeft">
            <h2 class="header_3 text_7 color_6">IdeiaVox</h2>
        </div>
    </div>
    <div class="row">
        <div class="grid_12 wow fadeInLeft">
            <div class="wrapper_1">
                <div class="box_3 last-row">
                    <h3 class="text_8 color_1">
                        Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt
                        ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
                    </h3>

                    <p class="text_6 color_10">
                        Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt
                        ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita- <br/>
                        tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in
                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <br/>
                        sint occaecat cupidatat non proident, sunt in culpa qui officia
                    </p>

                    <a class="btn_2 text_3 color_7" href="#">Read more</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg_6">
    <div class="container">
        <div class="row">
            <div class="grid_12 wow fadeInLeft">
                <h2 class="header_4 text_7 color_8">Nossos Serviços</h2>
            </div>
        </div>
        <div class="row">
            <div class="grid_6 wow fadeInLeft">
                <div class="box_4">
                    <h3 class="text_8 color_8">
                        <span class="put-left">
                            <span class="icon  bg_3 color_8 fa fa-briefcase"></span>
                        </span>
                        Lorem ipsum dolor sit amet conse ctetur adipisicing elit.
                    </h3>

                    <p class="text_6 color_9">
                        Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incidid- <br/>
                        unt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita- <br/>
                        tion ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                    <a class="btn_2 text_3 color_8" href="#">Read more</a>
                </div>
            </div>
            <div class="grid_6 wow fadeInRight">
                <div class="box_4">
                    <h3 class="text_8 color_8">
                        <span class="put-left">
                            <span class="icon bg_4 color_8 fa fa-pencil"></span>
                        </span>

                        Sunt in culpa qui officia deserunt mollit anim id est l
                    </h3>

                    <p class="text_6 color_9">
                        Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incidid- <br/>
                        unt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita- <br/>
                        tion ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                    <a class="btn_2 text_3 color_8" href="#">Read more</a>
                </div>
            </div>
        </div>
        <div class="wrapper_2">
            <div class="row">
                <div class="grid_6 wow fadeInLeft">
                    <div class="box_4 last-row">
                        <h3 class="text_8 color_8">
                            <span class="put-left">
                                <span class="icon bg_2 color_8 fa fa-book"></span>
                            </span>
                            Excepteur sint occaecat cupidatat non proident
                        </h3>

                        <p class="text_6 color_9">
                            Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incidid-
                            <br/>
                            unt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita- <br/>
                            tion ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                        <a class="btn_2 text_3 color_8" href="#">Read more</a>
                    </div>
                </div>
                <div class="grid_6 wow fadeInRight">
                    <div class="box_4 last-row">
                        <h3 class="text_8 color_8">
                            <span class="put-left">
                                <span class="icon bg_1 color_6 fa fa-lock"></span>
                            </span>
                            Ipsum dolor sit amet conse ctetur adipisicing elit.
                        </h3>

                        <p class="text_6 color_9">
                            Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incidid-
                            <br/>
                            unt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita- <br/>
                            tion ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                        <a class="btn_2 text_3 color_8" href="#">Read more</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

<!--========================================================
                          FOOTER
=========================================================
<footer id="footer">
    <div class="bg_1 wrapper_3">
        <div class="container">
            <div class="row">
                <div class="grid_3 wow fadeInLeft" data-wow-delay="0.2s">
                    <h2 class="header_5 text_3 color_6">Company</h2>
                    <ul class="list">
                        <li><a href="#">Lorem ipsum dolor </a></li>
                        <li><a href="#">Ctetur adipisicing</a></li>
                        <li><a href="#">Do eiusmod tempor</a></li>
                        <li><a href="#">Incididunt ut labore</a></li>
                        <li><a href="#">Et dolore magna</a></li>
                        <li><a href="#">Minim veniam</a></li>
                    </ul>
                </div>
                <div class="grid_3 wow fadeInLeft" data-wow-delay="0.4s">
                    <h2 class="header_5 text_3 color_6">Products</h2>
                    <ul class="list">
                        <li><a href="#">Ctetur adipisicing </a></li>
                        <li><a href="#">Do eiusmod tempor</a></li>
                        <li><a href="#">Incididunt ut labore</a></li>
                        <li><a href="#">Et dolore magna </a></li>
                        <li><a href="#">Minim veniam</a></li>
                        <li><a href="#">Quis nostrud set </a></li>
                        <li><a href="#">Ullamco laboris nis</a></li>
                    </ul>
                </div>
                <div class="grid_3 wow fadeInRight" data-wow-delay="0.6s">
                    <h2 class="header_5 text_3 color_6">Partnerships</h2>
                    <ul class="list">
                        <li><a href="#">Do eiusmod tempor</a></li>
                        <li><a href="#">Incididunt ut labore </a></li>
                        <li><a href="#">Et dolore magna</a></li>
                        <li><a href="#">Minim veniam</a></li>
                        <li><a href="#">Quis nostrud set</a></li>
                        <li><a href="#">Ullamco laboris nis</a></li>
                    </ul>
                </div>
                <div class="grid_3 wow fadeInRight" data-wow-delay="0.8s">
                    <h2 class="header_5 text_3 color_6">Follow Us</h2>
                    <ul class="social-list">
                        <li><a class="fa fa-twitter" href="#"></a></li>
                        <li><a class="fa fa-facebook" href="#"></a></li>
                        <li><a class="fa fa-rss" href="#"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="grid_12">
                <div class="info text_11"><a href="./">Software©</a> 2014. <a href="index-5.html">Privacy Policy</a>
                    More <a rel="nofollow" href="http://www.templatemonster.com/category.php?category=346&type=1" target="_blank">Software Company Templates at TemplateMonster.com</a></div>
            </div>
        </div>
    </div>
</footer>
</div>
-->
<script src="js/script.js"></script>
</body>
</html>
html

  • improves a little the question not only glue the code gets bad to help.

  • thanks I’m new here, a friend gave me this site,how do I remove the code I posted, and just go to the part that matters?

  • 1

    https://answall.com/help/how-to-ask gives a read, but overall isolate an example, and describe what you want, the easier it is to understand your problem the easier people help you.

  • I have a website but the scroll bar appears and works only in firefox, in Chrome not, includes a java script code,

  • follow the code now the bars appear in Chrome but do not move the central screen only if I click on the sidebars, how do I solve this?

  • the code below:<script> //function to activate scroll in browsers ex: Chrome window.addeventlistener('scroll', () => { const scrollable = Document.documentElement.scrollHeight - window.innerheight const scrolled = window.Scrolly; if (Match.Ceil(scrolled) === scrollable){ Alert('has Scroll working on Chrome'!); }); </script>

  • Yes, but edit the question and put this information there. I’ll look to try to help you.

  • how do I activate the scroll bar in Chrome? only in mozila it works, help me

  • Put the CSS in the question so we can try to reproduce the problem.

  • There are 2 errors in the code: if (Math.ceil(scrolled) === scrollable){ and instead of Match.ceil, the correct is Math.ceil.

  • sam I did what you told me and so let’s look at the <script> //function to activate scroll in browsers ex: Chrome window.addeventlistener('scroll',() => { const scrollable = Document.documentElement.scrollHeight - window.innerheight const scrolled = window.Scrolly; if (Math.Ceil(scrolled) === scrollable){ }); } </script>

  • <script> //function to activate scroll in browsers ex: Chrome window.addeventlistener('scroll',() => { const scrollable = Document.documentElement.scrollHeight - window.innerheight const scrolled = window.Scrolly; if (Math.Ceil(scrolled) === scrollable){ }); } </script>

  • Your problem is with some script blocking the scroll wheel on the body, if you put a margin-left: 100px; in the HTML tag, will give an empty space to the left, if you put the mouse there and scroll with the mouse wheel you will see that in html scroll works, but in body no!! Another test is you remove all .js from the site and you will see that the Scroll works again. So your problem is one of those JS that is interfering with the body somehow! I suggest you remove one by one until you find which one is bugging the page

  • I found javascript that blocks but it is the javascript call, and without it images do not load.

  • thanks to all for the help was a class in javascript, thanks in particular to hugocs! ,excludes a class that was meant to soften mousewheel, which blocked on Chrome.

Show 10 more comments

1 answer

0

Add a style in the element you want to have scroll bar:

style="overflow: auto"

Example:

<html>
 <head>
  ...
</head>
<body style="overflow: auto">
  ...
</body>
<html>

  • But the body already has overflow: auto!! Or someday you have to say in your CSS that the scroll should appear in the body?

  • The body was just an example, you have to put that style wherever you have the scroll bar.

  • And because Firefox works scrolling and Chrome has no scrolling?

  • this is my problem in Chrome, does not work, I did what Marcelo Martins told me, but still does not roll in Chrome,no longer know what to do.

  • Some of your css is doing this, try commenting on some . css files to see which one is removing the scroll bar.

  • the bar appears,in Chrome, but s[o works if you click it, in the right corner

  • take a look at the page: http://nova.ideiavox.com.br

  • I had misunderstood your question....... try removing this class from your css: "noscroll"

  • I didn’t find this class

Show 4 more comments

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.