为什么这个网站在webkit上水平滚动？

我在Safari和Chrome在OSX的最新版本测试此。它似乎仅限于web-kit，因为其他人告诉我IE中没有横向scroll。

我试图用下面的CSS解决这个问题：

/* For the "inset" look only */ 
html { 
    overflow: auto; 
} 

body { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    bottom: 20px; 
    right: 20px; 
    padding: 30px; 
    overflow-y: hidden; 
    overflow-x: hidden; 
} 

body:hover { 
    overflow-y: scroll; 
} 

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 0px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
} 

body { 
// overflow-x: hidden; 
    font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif; 
    width: 100%; 
    margin: 0; 

    //position: relative; 
//left: 15px; 
//-ms-scroll-limit: 0 0 0 0; 
//-webkit-overflow-scrolling:touch; 
}

它的工作原理，除了一个事实，即垂直滚动不再适用于移动触摸设备。可能是因为这样：

body:hover { 
     overflow-y: scroll; 
    }

我在这里完全失败。这个问题的根源是什么？

来源

2015-01-14 Matt MacPherson

尝试增加给你的CSS

html, body { 
    max-width: 100%; 
    overflow-x: hidden; 
}

来源

2015-01-14 05:29:54

使用溢出 - X属性body标签

body{ 
    overflow-x: hidden; 
}

overflow-x property

或

尝试增加Width : 100%财产给你r 立即开始您的HTML中的DIV。

来源

2015-01-14 05:31:05 rajmathan

这是因为，在下面的图片

enter image description here

您可以为您所使用的自举这样的行类应该有一个父类的容器，并且还加入class="container"解决这个将width:100%分配给它。

enter image description here

来源

2015-01-14 05:44:15 4dgaurav

哦。我的。神。我忘了添加一个class =“container”......我花了至少7个小时的时间！谢啦：） –

为什么这个网站在webkit上水平滚动？

回答

相关问题