【CSS】html页面调到手机自适应之后html，body的overflow=‘hidden’不起作用了。

Z时代
2024-01-10
分类：技术分享

html页面调到手机自适应之后html，body的overflow=‘hidden’不起作用了。

经过调试看见overflow='hidden'是生效的，但是网页有横向滚动条，可以拖动。

就像下面的图片：

相关代码

<body>
<div class="nav">
    <div class="menu" id="tab-bar">
        <div class="ico-menu">
            <div  class="bar"></div>
            <div  class="bar"></div>
            <div  class="bar"></div>
        </div>
        <span data-hover="3235">Menu</span>
    </div>
    <div class="award">
        <div class="award-r">Home</div>
        <div class="award-r">Dating Sites</div>
        <div class="award-r">Bi-Stories</div>
        <div class="award-r">Forums</div>
        </ul>
    </div>
</div>
<div class="mask"></div>
<div class="left-bar">
    <div class="leftlogo">
        <img src="./image/mydatingfs.png" alt="">
    </div>
    <ul class="main-ul">
        <li>Bicurious Dating</li>
        <li>Dating Tips</li>
        <li>Blog</li>
        <li>Subscribe</li>
    </ul>
    <div class="bar-close">
        <span class="bar-left"></span>
        <span class="bar-right"></span>
    </div>
</div></body>

html,body{margin: 0;padding: 0;overflow:auto;overflow-x: hidden;}

var LeftBar =document.getElementsByClassName('left-bar')[0]
var BoDy = document.body
var  TabBar = document.getElementById('tab-bar')
var BarClose = document.getElementsByClassName('bar-close')[0]
var phoneMask = document.getElementsByClassName('mask')[0]
TabBar.onclick = function () {
    if (phoneMask.style.display=="block") {
        BoDy.style.marginLeft = "00px"
        LeftBar.style.left = "-300px"
        phoneMask.style.display = "none"
        document.documentElement.style.overflow = 'scroll';
        //BoDy.style.position = 'relative'
    }
    else {
        BoDy.style.marginLeft = "300px"
        LeftBar.style.left="-2px"
        phoneMask.style.display = "block"
        document.documentElement.style.overflow='hidden';
        //BoDy.style.position = 'fixed'
    }
}
BarClose.onclick = function () {
    BoDy.style.marginLeft = "00px"
    LeftBar.style.left="-300px"
    phoneMask.style.display = "none"
    document.documentElement.style.overflow='scroll';
    //BoDy.style.position = 'relative'}