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

Question

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

现在这是我为屏幕调整大小编写的 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 {


}
})();

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

我是否有机会阻止它？不喜欢用户水平滚动吗？

谢谢

Answer 1

在您的 CSS 文件中使用 CSS 和这个:

html, body {overflow-x: hidden;}

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

I found I could fix it by finding/fixing/removing elements that were wider than the width. For instance, if you have a 100% width on your container, and then an element inside has 100% width with margin or padding, even if the overflow is hidden on the container, the page will drag from side to side.

If you can make sure your elements inside don't horizontally spill outside the container, the page won't drag. If you need padding on a percentage width inside the container (like one element with 100% width, or two with 50% or whatever), 'box-sizing: border-box;' is the way forward.