滚动条正在将页面内容移到左侧 [英] Scrollbar is moving page content to the left

问题描述

我第一次在Bootstrap上建立自己的网站，并遇到一个问题，我找不到解决方案。当我添加一些内容并且它的大小足以在浏览器中添加滚动条时，整个页面内容向左移动。

简单来说，如果有滚动条，页面内容正在向左移动像17px，如果没有，它的作品没问题。我不想在这里添加一个烫发滚动条，如

  overflow-y：scroll; 
  

如果我添加

 宽度：100vw; 
  

它工作正常，即使使用滚动条，内容也会保持在其位置，但如果有垂直滚动条，水平卷轴无缘无故地出现。

解决方案

您有几个解决方案：

1. 您可以永久显示您的滚动信息并相应地将其设为页面的一部分：
   
   

     html {
    overflow-y：scroll; 
   } 
     




2. 您可以添加：
   
   

     padding-right：40px; 
     

   因为我听到40px是你可以得到的最大卷轴尺寸。




3. 创建一个拥有所有内容的父级div，然后创建一个稍小的子级，使其更改父级大小不会更改子级大小。您可以创建JS函数来检测页面上是否显示滚动条，并会更改页边距设置。

>


4. 您可以使用媒体查询来解决问题。

I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.

In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like

overflow-y: scroll;

and if I add

width: 100vw;

It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.

解决方案

You have couple of solutions:

1. You can show your scroll permanently and style it accordingly to be a part of your page:

   html {
       overflow-y: scroll;
   } 
   

2. You can add:

   padding-right: 40px;
   

   as 40px is what I have heard is the max scroll size that you can get.

3. Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.

4. You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.

5. You can use media queries to tackle the problem.

这篇关于滚动条正在将页面内容移到左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！