更改移动版网页的滚动方向

Question

我构建了一个页面，其中包含几个以视频为背景的部分，每当用户滚动时，每个不同的部分都有一个 scrollsnap。

但是在移动设备上，我希望用户水平滚动而不是垂直滚动。我知道 scrollsnap 的诀窍是设置 type: x mandatory，但要让它真正起作用，我需要更改页面布局，而不是

body = 500vh * 100vw 在桌面上（有 5 节 100vh 和 100vw 每节）

变成：

正文 = 100vh * 500vw 在手机上

是否可以通过媒体查询以这种方式更改布局？

html,body{ margin:0; padding:0; background-color: #232323; }
            
            .text_id {
                color: #fff;
                font-size:calc(12px + 1.8vw);
                font-family: 'Montserrat', sans-serif;
                font-weight: 600;
                text-align: center;
            }
            
        .centering_container, .centering_container2, .centering_container3, .centering_container4, .centering_container5 {
              z-index: -1;
              height:100%;
              width:100%;
              overflow:hidden; 
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              position: relative;
            }
            
            #wrapper{
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 3;
            }
            #featured {
              position: absolute;
              z-index: 2;
              width: calc(100vh * (1920 / 1080));    /*  video width / height  */
              height: calc(100vw * (1080 / 1920));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            #wrapper2{
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 2;
            }
            #featured2{
              position: absolute;
              z-index: 3;
              width: calc(100vh * (1620 / 1080));    /*  video width / height  */
              height: calc(100vw * (1080 / 1620));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            #wrapper3 {
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 2;
            }
            #featured3 {
              position: absolute;
              z-index: 2;
              width: calc(100vh * (1920 / 1080));    /*  video width / height  */
              height: calc(100vw * (1080 / 1920));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            #wrapper4 {
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 4;
            }
            #featured4 {
              position: absolute;
              z-index: 2;
              width: calc(100vh * (1920 / 1080));    /*  video width / height  */
              height: calc(100vw * (1080 / 1920));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            
            #wrapper5 {
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 2;
            }
            #featured5 {
              position: absolute;
              z-index: 2;
              width: calc(100vh * (960 / 506));    /*  video width / height  */
              height: calc(100vw * (506 / 960));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            
            video {
              z-index: -2;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
            
            
            
            /******** smooth scroll  scrollsnap********/
            
            .scroll-container {
              width: 100%;
              height: 100vh;
              overflow: auto;
              -webkit-scroll-snap-type: y mandatory;
              -ms-scroll-snap-type: y mandatory;
              scroll-snap-type: y mandatory;
            }
            
            .receveur {
              scroll-snap-align: start;
              scroll-behavior: smooth;
            }

<!-- ************************** WHAT I NEED 
            
            
                IN DESKTOP
            
                 ------
                | 100vh|
                | 100vw|
                |      |
                |   ↓  |
                 ------
                 Scrollsnap
                 ------
                | 100vh|
                |100vw |
                |      |
                |   ↓  |
                 ------
                 Scrollsnap
                 ------
                |100vh |
                |100vw |
                |      |
                |   ↓  |
                 ------     
                IN MOBILE
            
                 ------            ------            ------    
                |100vh |          |100vh |          |100vh |
                |100vw |          |100vw |          |100vw |
                |      |Scrollsnap|      |Scrollsnap|      |
                |   →  |      →   |   →  |     →    |  →   |
                |      |          |      |          |      |
                 ------            ------            ------
                 
  ***********--!>
  
  
   
        
<!-- ****************************** FIRST section ********************************* -->

     <div class="scroll-container">
        <div class="receveur receveur-1"></div>
        <div id="wrapper">
            <div id="featured">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/3_third.mp4" type="video/mp4" />
                </video>
                <div class="centering_container">
                    <div class="text_id">
                        <h1 style="line-height:120%;">Section 1</h1>
                    </div>
                </div>
            </div>
        </div>
            



<!-- ****************************** SECOND section ********************************* -->
        <div class="receveur receveur-2" id="arrowscroll"></div>
        <div id="wrapper2">
            <div id="featured2">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/1_first.mp4" type="video/mp4" />
                </video>
                <div class="centering_container2">
                    <div class="text_id">
                        <h1 style="line-height:120%;">SECTION<br>2<span class="tim">™</span></h1>
                    </div>
                </div>
            </div>
        </div>


<!-- ***************************** THIRD sectiom  ********************************************* -->


        <div class="receveur receveur-3"></div>
        <div id="wrapper3">
            <div id="featured3">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/2_second.mp4" type="video/mp4" />
                </video>
                <div class="centering_container3">
                    <div class="text_id">
                        <h1 style="line-height:120%;">Section <br>3</h1>
                    </div>
                </div>
            </div>
        </div>




<!-- ***************************** FOURTH VIDEO  ********************************************* -->


        <div class="receveur receveur-4"></div>
        <div id="wrapper4">
            <div id="featured4">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/5_fifth.mp4" type="video/mp4" />
                </video>
                <div class="centering_container4">
                    <div class="text_id">
                        <h1>Section 4</h1>
                    </div>
               </div>
          </div>
  </div>



<!-- ***************************** FIFTH VIDEO  ********************************************* -->


      <div class="receveur receveur-5"></div>
        <div id="wrapper5">
            <div id="featured5">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/4_fourth.mp4" type="video/mp4" />
                </video>
                <div class="centering_container5">
            <div class="text_id">
              <h1>Section 5</h1>
            </div>
                </div>
                </div>
            </div>
        </div>
</div>

Answer 1

您需要使用 CSS 中的 @media 规则，如下例所示：

@media (max-width: 400px) {
    html, body {
        // insert code here
    }
    .text_id {
        // insert code here
    }
}

所以基本上你会找到你的网站可能使用的任何移动设备的最大宽度，并设置 CSS 满足条件的规则（当使用 max-width 条件时例如，它将激活所有比指定宽度更薄的代码）。您可能需要在某些行的末尾使用 !important 以确保它不会被代码中的其他内容覆盖。

Answer 2

使用flex我们可以实现你所需要的：

我不知道你的断点是什么，但我为演示设置了 600px:

@media (max-width: 600px) {
/* targeting all wrappers - should probably have some kind of class */
div[id^="wrapper"] {
    height: 100vh;
    width: 100vw;
    flex-basis: 100vw;
    flex-shrink: 0;
}

.scroll-container {
    width: auto;
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow: auto;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
}
}

基本上，容器上的 flex (display:flex) 会强制所有包装器排成一行 (flex-direction:row)。然后在包装器上我们说你应该是视图宽度的 100% (flex-basis:100vw) 并且你不能更小 (flex-shrink: 0)。

然后我们就切换滚动捕捉。但是，您可能需要检查您的目标设备是否支持滚动捕捉 https://caniuse.com/?search=scroll-snap

Answer 3

你好，看看我创建的 css，这可能有助于解决您的问题

demo ：请注意，这仅适用于低于 1024 像素的移动设备宽度。这是我用过的媒体查询，你可以随意更改。

repo link to stackblitz

CSS代码

div{
  background-color: beige;
  border: 1px solid;
}

.child{
  height: 100vh;
  width: 100%;
}


/* Portrait */
@media only screen 
  and (max-device-width: 1024px) {
    .parent{
      display: block;
      overflow-x: scroll;
      white-space: nowrap;
    }
   
    .child{
      height: 100%;
      width: 100vh;
      display:inline-block;
    }
}

HTML代码

<div class="parent">
    <div class="child">1st video</div>
    <div class="child">2nd video</div>
    <div class="child">3rd video</div>
    <div class="child">4th video</div>
    <div class="child">5th video</div>
</div>

元标记 <-- !IMPORTANT

<meta name="viewport" content="width=device-width, initial-scale=1">

更改移动版网页的滚动方向

Change scroll direction of webpage on mobile version

html

css

layout

scroll

scroll-snap