Bootstrap页面溢出-x隐藏,IOS页面上的一个元素仍然左右滚动

时间:2016-04-16 14:32:40

标签: html ios css twitter-bootstrap-3

我希望我的cordova应用程序看起来不像是一个Web应用程序,更像是一个真正的应用程序,通过消除左右滚动。

我已经将overflow-x属性设置为隐藏在html和body标签上,并且除了下面的页面之外的所有页面都有效,它左右滚动但不应该。

我是否误解了网格?我试图应用" overlow-x:hidden"属性为封闭div而不是其他地方建议的body和html,尝试将属性应用于各个div,尝试限制div上的宽度。我已经尝试将html位置更改为固定(这会修复左右滚动,但也会停下来,我需要)。你can view the page below on an iOS device to see the behaviour here。哪个糟糕的技能组合 - css,html或bootstrap - 让我失望?

    <!DOCTYPE html>
<html lang="en" style="position: relative; min-height: 100%;">
    <head>
        <meta charset="utf-8" /> 
        <title>
            My Awesome Title
        </title>
        <meta name="generator" content="BBEdit 11.0" /> 

        <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/entypo.min.css"> 
        <script type="text/javascript" src="scripts/jquery-2.0.3.min.js">
        </script>
        <script type="text/javascript" src="scripts/bootstrap.min.js">
        </script>
        <script type="text/javascript" src="scripts/bootbox.min.js">
        </script>
        <style>
            html, body {
            overflow-x: hidden !important;
            }
        </style>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' /> 
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3" style="background-color:#F8F8F8;">
                    <h2 class="text-center">
                        My Awesome Title
                    </h2>
                    <br /> 
                    <div id="hexpix" class="center-block">
                        <br /><br /> 
                        <div id="hexpixdiv">
                        </div>
                    </div>
<!-- Alert Space -->
                    <div id="AlertSpace" class="center-block" style="text-align:center; width:75%">
                    </div>
                    <br /> 
<!-- Hex Content Space for text  -->
                    <div id="hexindex" class="text-center">
                    </div>
<!-- hexindex close -->
                    <div id="hexcontent" class="text-center">
                    <!-- 
    <p>
                            Blah blah this text should NOT scroll left and right because overflow-x is set to hidden but it slides back and forth like a hotplate on butter. Why, people, Why?
                            <p>
 -->

                    </div>
<!-- hexcontent close -->
                    <div id='HelpButton'>
                    </div>
                </div>
<!-- Column class close-->
            </div>
<!-- Row class close-->
            <br /> 
        </div>
<!--Container close-->
        <div id="sharestrip" style="position: absolute; bottom:40px; width:100%; height:10px;">
            <div class="row">
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="Reddit">
                        <span>
                        </span>
                    </a>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="SMS">
                        <span class="icon-export">
                        </span>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="Email">
                        <span class="icon-gmail">
                        </span>
                    </a>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="Twitter">
                        <span class="icon-twitter">
                        </span>
                    </a>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="Facebook">
                        <span class="icon-facebook">
                        </span>
                    </a>
                </div>
                <div class="col-xs-2 text-center">
                    <a href="javascript:void(0)" class="tumblr">
                        <span>
                        </span>
                    </a>
                </div>
            </div>
<!-- Row -->
        </div>
<!-- Sharestrip -->
        <div id="footer" style="position: absolute;
  bottom: 0;
  width: 100%;  height: 20px;">
<!-- See hex.css for custom css on this -->
            <div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-3 text-center">
                            <a href="javascript:void(0)">
                                <span class="nav-link">
                                </span>
                            </a>
                        </div>
                        <div class="col-xs-2 text-center">
                            <a href="javascript:void(0)" 
                            <span class="nav-link">
                                1
                            </span>
                            </a>
                        </div>
                        <div class="col-xs-2 text-center">
                            <a href="javascript:void(0)">
                                <span class="nav-link">
                                    2
                                </span>
                            </a>
                        </div>
                        <div class="col-xs-2 text-center">
                            <a href="javascript:void(0)">
                                <span class="nav-link">
                                    3
                                </span>
                            </a>
                        </div>
                        <div class="col-xs-3 text-center">
                            <a href="javascript:void(0)">
                                <span class="nav-link">
                                </span>
                            </a>
                        </div>
                    </div>
<!-- End Row -->
                </div>
<!-- End Container -->
            </div>
<!-- End Navbar -->
        </div>
<!-- End Footer -->
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

当你设置overflow:hidden to element时,它并不意味着它停止可滚动...它只是隐藏了滚动条。由于移动设备在触摸元素上的任何位置时滚动内容,因此它仍然可以滚动。

事实是 - 即使在桌面设备上,您的网站也可以在X轴上滚动,只需在身体标记上使用overflow-x: hidden隐藏它。

您的网站在所有设备上可滚动显示的原因是您忘记将 class="container" 添加到 <div id="sharestrip"... 并且内部的行它的100%+15px(left margin)+15px(right margin)大于窗口宽度。

此行为被.container padding-left: 15px and padding-right: 15px减少了{{1}},因此您只需要记住将class =“container”添加到该行的父级。