0

我得到了一个非常复杂的设计，背景很大，所以我必须想出一个小脚本来调整较小屏幕上的屏幕大小，以居中并移除空白区域并移除水平滚动条。

现在这是我为调整屏幕大小编写的 Jscript 片段：

(function() {
    if(jQuery(window).width() >= 1024 && jQuery(window).width() <= 1275 ) {
      jQuery('html').css({"margin-left":"-180px"});
       jQuery('html').css({"overflow-x":'hidden'});

    }


    else if(jQuery(window).width() == 1280) {
      jQuery('html').css({"margin-left":"-52px"});
         jQuery('html').css({"overflow-x":'hidden'});    
    }

     else if(jQuery(window).width() >= 1300 || jQuery(window).width() <= 1400 ) {
      jQuery('html').css({"margin-left":"-0"});
         jQuery('html').css({"overflow-x":'hidden'});    
    }

    else if(jQuery(window).width() >= 1430 ) {
      jQuery('html').css({"margin-right":"-60px"});
         jQuery('html').css({"overflow-x":'hidden'});    
    }

    else if(jQuery(window).width() < 940 ) {
      jQuery('html').css({"margin-left":"0"});
       jQuery('html').css({"overflow-x":'visible'});
    }

    else {


}
})();

现在，如果用户仍然使用触摸屏，他们可以滚动到页面的右侧。

如果我能阻止它，还有机会吗？就像用户没有机会水平滚动一样？

谢谢

4

2 回答 2

2

在你的 CSS 文件中使用 CSS 和 this：

html, body {overflow-x: hidden;}

如果您想禁用滚动，那么这将对您有所帮助。

我发现我可以通过查找/修复/删除比宽度更宽的元素来修复它。例如，如果您的容器上有 100% 的宽度，然后内部的元素具有 100% 的宽度并带有边距或填充，即使溢出隐藏在容器上，页面也会左右拖动。

如果您可以确保您的元素不会水平溢出容器之外，则页面不会拖动。如果您需要在容器内的百分比宽度上填充（例如一个 100% 宽度的元素，或者两个 50% 或其他的元素），'box-sizing:border-box;' 是前进的方向。

于 2013-07-08T16:04:37.043 回答
1

实际上，您应该能够相当简单地做到这一点，而无需 Javascript hack。我以前在各种网站上都使用过这种方法。

HTML

<div id="outer-wrapper">
    <div id="wrapper">
        <div class="outer header">
            <div class="main header">
                <div class="inner">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#outer-wrapper {
    background: transparent url("../images/background-header.png") no-repeat center top;
    margin: 0 auto;
    min-width: 950px;
    padding: 0;
    width: 100%;
}

.header {
    background: transparent url("../images/background-navigation.png") no-repeat center top;
    height: 254px;
}

#wrapper, .outer {
    margin: 0 auto;
    max-width: 1260px;
    min-width: 950px;
}

.main {
    margin: 0 auto;
    width: 950px;
}

.inner {
    float: left;
    width: 950px;
}

有关现实生活中的示例，请参阅此站点：www.levidealmansion.com 并特别注意出现在徽标和导航后面的“藤蔓”，以及即使您缩小浏览器也不会出现水平溢出......在至少低至 960 像素。

于 2013-07-08T16:15:36.557 回答