文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML滚动问题(我想摆脱按钮，水平选项，并保留对齐功能)

问HTML滚动问题(我想摆脱按钮，水平选项，并保留对齐功能)
EN

Stack Overflow用户

提问于 2021-01-09 09:34:14

回答 1查看 46关注 0票数 2

我希望有一个很酷的滚动效果来锁定页面上的每个div id，但我不确定如何做。这是它看起来像https://test.iamnotregis.repl.co/ -_-

我删除了css，因为不需要它，但我仍将在repl.it https://repl.it/@IAmNotRegis/test#index.html上链接该项目。

    <!DOCTYPE html>
    <html>
    <body>
      <!-- Load user defined styles -->
      <link href="style.css" rel="stylesheet" type="text/css" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="script.js"></script>

    <div id="carousel" class="snap">
      <div id="carousel-1">Item 1<br>Start scrolling ...</div>
      <div id="carousel-2">Item 2</div>
      <div id="carousel-3">Item 3</div>
    </div>

    <div id="controls">
      <button onclick="toggleSnap()">Turn Snapping <span id="otherSnappingState">off</span></button>
      <button onclick="toggleDirection()">Change scroll to <span id="otherScrollState">vertical</span></button>
    </div>

    </body>
    </html>

    function toggleSnap() {
      var snapEnabled = document.getElementById('carousel').classList.toggle('snap');
      document.getElementById('otherSnappingState').innerText = snapEnabled ? 'off' : 'on';
    }

    function toggleDirection() {
      var isVertical = document.getElementById('carousel').classList.toggle('vertical');
      document.getElementById('otherScrollState').innerText = isVertical 
    }

    #carousel {
      /* Ensure that the contents flow horizontally */
      overflow-x: auto;
      white-space: nowrap;
      display: flex;
    }

    #carousel.vertical {
      flex-direction: column;
    }

    /* 2018 spec - For Safari 11, Chrome 69+ */
    #carousel.snap {
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
    }

    #carousel.snap > div {
      scroll-snap-align: center;
    }

    #carousel.snap.vertical {
      flex-direction: column;
      scroll-snap-type: y mandatory;
    }



    /* 2015 spec - For Firefox, Edge, IE */
    #carousel.snap {
      scroll-snap-type: mandatory;
      -ms-scroll-snap-type: mandatory;
      scroll-snap-points-x: repeat(100%);
      -ms-scroll-snap-points-x: repeat(100%);
    }

    #carousel.snap.vertical {
      scroll-snap-points-x: initial;
      -ms-scroll-snap-points-x: initial;
      scroll-snap-points-y: repeat(100%);
      -ms-scroll-snap-points-y: repeat(100%);
    }

html

css

scroll

scrollview

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-09 09:51:52

从index.html中删除"controls“div

<!DOCTYPE html>
    <html>
    <body>
      <!-- Load user defined styles -->
      <link href="style.css" rel="stylesheet" type="text/css" />
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      

    <div id="carousel" class="snap">
      <div id="carousel-1">Item 1<br>Start scrolling ...</div>
      <div id="carousel-2">Item 2</div>
      <div id="carousel-3">Item 3</div>
    </div>


    </body>
    </html>

您不再需要的javascript函数toggleSnap()和toggleDirection()也可以删除。

但是styles.css文件是强制的。CSS样式确保了快照的魔力。

#carousel {
  /* Ensure that the contents flow horizontally */
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

#carousel.vertical {
  flex-direction: column;
}

/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
}

#carousel.snap > div {
  scroll-snap-align: center;
}

#carousel.snap.vertical {
  flex-direction: column;
  scroll-snap-type: y mandatory;
}



/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  -ms-scroll-snap-points-x: repeat(100%);
}

#carousel.snap.vertical {
  scroll-snap-points-x: initial;
  -ms-scroll-snap-points-x: initial;
  scroll-snap-points-y: repeat(100%);
  -ms-scroll-snap-points-y: repeat(100%);
}


/* Below here is styling, not important for the actual example, just to make it look nice. No need to look down here! */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

#carousel > div {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

#carousel-1 {
  background-color: #e34747;
}

#carousel-2 {
  background-color: #5ab92c;
}

#carousel-3 {
  background-color: #226de2;
}

#controls {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

#controls button {
  padding: 5px 10px;
}

如果您想让它垂直滚动，也可以将类"vertical“名称添加到"Carousel”div中。

<div id="carousel" class="snap vertical">

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65638490

复制

相似问题

问HTML滚动问题(我想摆脱按钮，水平选项，并保留对齐功能)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML滚动问题(我想摆脱按钮，水平选项，并保留对齐功能)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML滚动问题(我想摆脱按钮，水平选项，并保留对齐功能)
EN