仅使用 CSS 时水平滚动不起作用答案

【问题标题】：horizontal scroll is not working when using CSS only仅使用 CSS 时水平滚动不起作用
【发布时间】：2021-09-11 22:24:35
【问题描述】：

我正在尝试使用 scroll-snap-type: y 强制实现水平滚动；滚动捕捉行为。我能够实现滚动捕捉行为，但不能实现水平滚动。但是如果我按住 shift 并滚动它可以工作，如果我按箭头键它也可以工作。只是在鼠标滚动上不起作用

可能是什么问题？只能使用CSS解决还是需要JS？

CodePen 链接 - https://codepen.io/manoranjanpanig/pen/dyWvzdK

HTML

<body>
   <div class="main-wrapper">
      <section class="one">
         <h1>First Page</h1>
      </section>
      <section class="two">
         <h1>Second Page</h1>
      </section>
      <section class="three">
         <h1>Third Page</h1>
      </section>
   </div>
</body>

CSS

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   overflow: hidden;
}
body{
   width: 100vw;
   height: 100vh;
}
.main-wrapper{
   display: flex;
   width: 100vw;
   height: 100vh;
   scroll-snap-type: x mandatory ;
   overflow-x: scroll;
}
section{
   flex: none;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 5rem;
   scroll-snap-align: start;
}
.one{
   background-color: aqua;
   
}
.two{
   background-color: salmon;
}
.three{
   background-color: aquamarine;
}

【问题讨论】：

标签： css horizontal-scrolling

【解决方案1】：

我会给你一个水平滚动和平滑滚动的例子/使用css平滑滚动/：

const scrollContainer = document.querySelector("main");

scrollContainer.addEventListener("wheel", (evt) => {
  evt.preventDefault();
  scrollContainer.scrollLeft += evt.deltaY;

});

main {
  overflow-x: hidden;
  / this hides the scrollbars/ 
  display: flex;
  scroll-behavior: smooth;
}

section {
  min-width: 100vw;
  min-height: 100vh;
}


/* Please note that you have to use min-width and min-height ! */

<main>
  <section></section>
  <section></section>
  <section></section>
</main>

或者你可以使用这种使用js平滑滚动的方法

const scrollContainer = document.querySelector("main");

  scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;

  });

  let = document.querySelector('#first', '#second', '#third', '#fourth');

  let el = document.querySelector('#home');
  let el2 = document.querySelector('#forMe');
  let el3 = document.querySelector('#work');
  let el4 = document.querySelector('#portfolio');


  first.addEventListener('click', function() {
    el.scrollIntoView({
      behavior: "smooth"
    });
  });
  second.addEventListener('click', function() {
    el2.scrollIntoView({
      behavior: "smooth"
    });
  });

  third.addEventListener('click', function() {
    el3.scrollIntoView({
      behavior: "smooth"
    });
  });

  fourth.addEventListener('click', function() {
    el4.scrollIntoView({
      behavior: "smooth"
    });
  });

main {
  overflow-x: hidden;
  / this hides the scrollbars/ display: flex;
}

section {
  min-width: 100vw;
  min-height: 100vh;
}

<header>
  <nav>
    <button id=first>Home</button>
    <button id=second>For me</button>
    <button id=third>Work</button>
    <button id=fourth>Portfolio</button>
  </nav>
</header>
<main>
  <section id=home></section>
  <section id=forMe></section>
  <section id=work></section>
  <section id=portfolio></section>
</main>

【讨论】：