发表新帖
发表新帖

overflow-x:hidden still can scroll

前端 未结
关注
10 800
滥情空心
滥情空心 2020-12-05 16:48

The problem is:

I have a full width bar menu, which is made by creating a big margin on the right and to the left. This margin should be cropped by overflow-x:

相关标签:
10条回答
  • 温柔的废话
    2020-12-05 17:46

    I had this exact same problem. I solved it by putting overflow-x: hidden; on both the body and html.

    html {
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}
body {
  margin: 0 auto;
  overflow-x: hidden;
  width: 950px;
}
.full {
  background: red;
  color: white;
  margin-right: -3000px !important;
  margin-left: -3000px !important;
  padding-right: 3000px !important;
  padding-left: 3000px !important;
}
    <div>
  <div class="full">
    abc
  </div>
</div>

    0 讨论(0)
  • 迷失自我
    2020-12-05 17:50

    I found the solution here https://stackoverflow.com/a/9399429/622041

    You'll have to put a #wrapper around your content. overflow:hidden on the body won't work.

    #wrapper {position: absolute; width: 100%; overflow-x: hidden}

    And here the HTML:

    <html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="wrapper">
      <div class="yourContent"> ... </div>
    </div>
  </body>
</html>
    0 讨论(0)
  • 醉酒成梦
    2020-12-05 17:50

    Overflow on both the <body> and the <html> tags worked for me as well.

    0 讨论(0)
  • 野的像风
    2020-12-05 17:51

    There is another way to fix this issue with one line of code:

    body {
    /* All your regular code including overflow-x: hidden; */
    position:relative;
}

    This solved my issues on webkit (Mac)

    Reference: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

    0 讨论(0)
 看不清?
提交回复
热议问题