Question

我有一个水平滚动条，当观看设备为480px或更低时，我想将其变成垂直滚动。

目前我的相应HTML是：

<!-- section that contains all pics -->
<section id="wrapper" class="wrapper">
    <article class="post">
    <p><img src="img/scroll/01_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>
</section>
<!-- close section -->

HTML文档端脚本如下：

<script>
    $(function(){
        $("#wrapper").wrapInner("<table><tr>");
        $(".post").wrap("<td>");
    });     
    $(function() {
        $("body").mousewheel(function(event, delta) {
            this.scrollLeft -= (delta * 50);
            event.preventDefault();
        });
    });
    </script>

相应的CSS是：

#wrapper {
   float:left;
   margin:110px 0 0 0;
   padding:0 0 0 250px;
   background:#fff;
   position:relative;
   z-index:2;
   border-bottom:solid 20px #fff;
}

#wrapper img {
   color:#fff;
   width:auto;
}

#wrapper iframe {
   color:#fff;
}

.post {
   padding:0 10px 0 0;
   background:#fff;
   height:100%;
}

我的媒体查询是：

@media all and (max-width: 480px) {
   {

我想要在发生这种情况时（480px或更低），脚本停止水平滚动，开始垂直滚动并调整大小以获得最大宽度和适当的高度。

任何帮助将不胜感激。提前谢谢。

Answer 1

我觉得使用jquery将这些元素包装在表格单元格中是过分的。我倾向于摆脱它，只需在Article元素上使用响应式浮点数。所以新的js：

<script>

    $(function() {
        $("body").mousewheel(function(event, delta) {
            this.scrollLeft -= (delta * 50);
            event.preventDefault();
        });
    });

    </script>

新CSS：

.post {
   padding:0 10px 0 0;
   background:#fff;
   height:100%;
   display:block;
   float:left;
}
@media all and (max-width: 480px) {
   .post {
       float:none;
     }
   }

在您的文章之后的某个地方，您需要添加一个明确的：两者;规则...

Answer 2

我明白了!!!

答案一如既往地在我面前。问题是，当脚本创建一个表时，我正在争论.post和#wrapper！考虑到这一点，我操纵了桌子和中提琴！垂直滚动只在手机上！见下文：

@media all and (max-width: 480px) {
#wrapper {
   top:155px;
   width:auto;
   margin:0 0 0 10px;
   padding:0 0 0 0;
   background:#fff;
   position:absolute;
   z-index:2;
}

table {
   margin: 0 0 0 0;
}

td {
   display:block;
   padding: 0 0 10px 0;
}

tr {
   max-width:100%;
   height:auto;
}

table img {
   max-width:100%;
   height:auto;
}

真是一种解脱......现在要知道我的页脚发生了什么......

@Media查询 - 如何打破水平滚动？

2 个答案: