📜  如何使用 HTML 和 CSS 创建水平滚动捕捉?

📅  最后修改于: 2021-11-07 09:01:13             🧑  作者: Mango

在这个项目中,我们将仅使用 HTML 和 CSS 创建一个简单的水平滚动捕捉。

项目概况:

方法:为 HTML 对象设置动画的最佳方法是使用 CSS 类并在不同阶段设置过渡。

HTML代码:

HTML


style.css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    background-color: rgb(4, 84, 23);
}
  
h1{
    position: absolute;
    top: 0;
    margin: 3em;
    left: 37%;
    margin-left: 0;
}
  
.main_box{
    margin: 0 auto;
    margin-top: 15em;
    display: grid;
    grid-auto-flow: column;
    padding: 1em;
    gap: 1em;
    height: 15em;
    width: 30em;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}
  
.main_box > a{
    scroll-snap-align: center;
}
  
.main_box img{
    width: 12em;
    max-width: none;
    object-fit: contain;
    border-radius: 1em;
}


CSS 代码:以下是上述 HTML 代码中使用的“style.css”文件的内容。 CSS 用于为我们的 HTML 页面提供不同类型的动画和效果,使其看起来对所有用户都具有交互性。

  • 恢复所有浏览器效果。
  • 使用类和 id 为 HTML 元素赋予效果。

样式文件

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    background-color: rgb(4, 84, 23);
}
  
h1{
    position: absolute;
    top: 0;
    margin: 3em;
    left: 37%;
    margin-left: 0;
}
  
.main_box{
    margin: 0 auto;
    margin-top: 15em;
    display: grid;
    grid-auto-flow: column;
    padding: 1em;
    gap: 1em;
    height: 15em;
    width: 30em;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}
  
.main_box > a{
    scroll-snap-align: center;
}
  
.main_box img{
    width: 12em;
    max-width: none;
    object-fit: contain;
    border-radius: 1em;
}

输出:

水平滚动捕捉