如何阻止查看器在网页上水平滚动？答案

【问题标题】：How to block viewer from scrolling horizontally on a web page?如何阻止查看器在网页上水平滚动？
【发布时间】：2013-07-08 16:03:31
【问题描述】：

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

现在这是我为调整屏幕大小编写的 Jscript sn-p：

(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 {


}
})();

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

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

谢谢

【问题讨论】：

只是一些代码建议： 1. (function($) { ... })(jQuery); 将允许 $ 符号的简写使用而不会产生任何冲突； 2. 将$(window).width() 存储为变量，因为您经常引用它； 3. 像这样组合你的css() 调用：.css({'margin-left': -180px', 'overflow-x': 'hidden'})。只是为了优化。我知道这当然不能回答你的问题。最后：确保所有这些都发生在 $(window).resize() 事件中，以便在调整窗口大小时做出响应。
另外：您能否发布一下您目前的作品，或者预览一下设计的外观？看起来这个问题更适合通过 CSS 媒体查询来解决，根本不需要 JavaScript。
抱歉，还有一点要说：您将overflow-x 设置为visible 以用于小分辨率，这就是首先出现问题的原因。也许您应该明确设置body 元素的宽度？同样，如果不了解实际设计的流程，就很难确定。
@MMiller 感谢您的建议，但 $ 在用于 WordPress 主题时不起作用。而对于上传网站，它仍在制作中，根本不完整。
(function($) { $(document).ready(function () { $('body').css('background-color', 'red'); }); })(jQuery); function($) { 部分是一个匿名函数，所有内容都封装在其中。 })(jQuery) 部分为函数提供了一个参数，jQuery 对象，它是在 WordPress 中使用 noConflict() 创建的。此代码适用于任何地方。

标签： jquery html css screen-resolution

【解决方案1】：

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

html, body {overflow-x: hidden;}

如果您想禁用滚动，那么this 会帮助您。

我发现我可以通过查找/修复/删除元素来修复它比宽度宽。例如，如果你有一个 100% 的宽度容器，然后里面的元素有 100% 的宽度和边距或 padding，即使溢出隐藏在容器上，页面会左右拖动。

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

【讨论】：

感谢您的建议，我补充了，但如果我在触摸屏上打开网页，我仍然可以水平滚动。

【解决方案2】：

您实际上应该能够相当简单地做到这一点，而无需 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 像素。

【讨论】：