Question

<script type="text/javascript">
window.onscroll = function() {
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    var left_bar = document.getElementById("left_bar");
    if (t >= 80 && $('wrapper').width() <= 478 ) {
        left_bar.style.display = "none";
    } else {
        left_bar.style.display = "inline";
    }
}

当用户仅向下滚动移动设备时，我试图隐藏div。我不想在PC或平板电脑上隐藏它。

但是我做不正确..希望获得帮助谢谢

Answer 1

欢迎堆栈溢出！

wrapper不是有效的HTML标记。因此，只需将$('wrapper')更改为$('.wrapper')并为body元素提供一个类wrapper。

window.onscroll = function() {
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    var left_bar = document.getElementById("left_bar");
    if (t >= 80 && $('.wrapper').width() <= 478 ) {
        left_bar.style.display = "none";
    } else {
        left_bar.style.display = "inline";
    }
}

.wrapper {
  height: 100vh;
  width: 100vw;
}
#left_bar {
  height: 200px;
  width: 200px;
  background: red;
}

<body class='wrapper'>
  <div id='left_bar'></div>
</body>

仅在移动设备上向下滚动时隐藏div

1 个答案: