1. Column achieves horizontal page turning

Columns attribute: column-width column-count;

1. Column-width: indicates the width of the column. The default value is auto. Indicates that the width of each column is determined by other CSS properties, such as column-count. Negative values and percentages are not supported. If the value is larger than the outer container width, the final display width is the outer container width

Column-count: indicates the number of columns displayed on a screen. The default value is auto. The number of columns is determined by other CSS properties, such as column-width. Negative values and 0 are not supported. Column-count and column-width may have higher priority, so convert the column-count value uniformly, whichever is smaller is used.

Columns attribute: column-gap indicates the size of the blank space between each column.

Click to view the demo

HTML:

<div class="g-box">
    <div class="book noSelect" id="book">
      <div class="content" id="content">
        <h3>Chapter I General Outline</h3>
        <p>&emsp; &emsp; Chinese communist party is the vanguard of Chinese working class....</div>
    </div>
</div>
Copy the code

CSS:

.g-box{
    margin: 0 auto;
    position: relative;
    width: 600px;
    max-width: 100vw;
    height: 800px;
    overflow: hidden;
    background: #9b822d;

}
.book {
    height: 100%;
    margin: 0 16px;
}
.content {
    width: 100%;
    height: 100%;
    columns: 100vw 1;
    column-gap: 16px;
    transition: all .1s;
}
Copy the code

JS:

const content = document.getElementById('content'); const book = document.getElementById('book'); let startLeft = 0; // let moveStart = false; / / whether sliding const downFun = function (e) {startLeft = e.c. with our fabrication: lientX | | math.h floor (Number (e.c. with our fabrication: hangedTouches [0]. ClientX)); moveStart = true; // start sliding}; const moveFun = function (e, ele) { if (! moveStart) return; ele.style.transform = `translateX(${Number(ele.style.transform.replace(/[^0-9\-,]/g,'')) + (e.clientX || Math.floor(Number(e.changedTouches[0].clientX))) - startLeft}px)`; / / control the content migration startLeft = e.c. with our fabrication: lientX | | math.h floor (Number (e.c. with our fabrication: hangedTouches [0]. ClientX)); }; const upFun = function (ele) { moveStart = false; const nowPos = Number(ele.style.transform.replace(/[^0-9\-,]/g,'')); Transform = 'translateX(0px)'; if (nowPos > 0) { } else if (Math.floor(Math.abs(nowPos) / ele.clientWidth) >= Math.floor(ele.scrollWidth / ele.clientWidth) - 1) { // Transform = 'translateX(-${ele. ScrollWidth - content.clientWidth}px)'; } else {// middle page ele.style.transform = 'translateX(-${math.round (math.abs (nowPos)/ele.clientWidth) * (ele.clientWidth +  16)}px)`; }}; Book.addeventlistener ('mousedown',function (e) {downFun(e); }); book.addEventListener('mousemove',function (e) { moveFun(e, content); }); document.body.addEventListener('mouseup',function () { upFun(content); }); // book.adDeventListener (' touchStart ',function (e) {downFun(e); }); book.addEventListener('touchmove',function (e) { moveFun(e, content); }); document.body.addEventListener('touchend',function () { upFun(content); })Copy the code

2, the scroll – snap

Scoll-snap allows the browser to stop sliding and automatically slide to the target if the target element is in the window. Application scenario: Display products on mobile terminals and display positioning on the whole screen.

Scrollsnap-type: slide direction of x/y parent element

Scroll – snap – align: start/end/center. Stop position of child element Click to see demo

HTML:

<div id="result" class="result"></div>
  <div id="listY" class="list-ul">
  <div class="list-li active">
    <img class="list-img" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/19/169936a894b4a755~tplv-t2oaga2asx-image.image">
  </div>
  <div class="list-li">
    <img class="list-img" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/19/169936a894b4a755~tplv-t2oaga2asx-image.image">
  </div>
  <div class="list-li">
    <img class="list-img" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/19/169936a894b4a755~tplv-t2oaga2asx-image.image">
  </div>
  <div class="list-li">
    <img class="list-img" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/19/169936a894b4a755~tplv-t2oaga2asx-image.image">
  </div>
</div>
Copy the code

CSS:

.list-ul { width: 500px; height: 353px; margin: auto; font-size: 0; scroll-snap-type: y mandatory; white-space: nowrap; overflow-x: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; }. List -ul::-webkit-scrollbar {width: 0! important } .list-li { width: 100%; height: 100%; scroll-snap-align: center; position: relative; transition: filter .3s; } @media screen and (max-width: 480px) { .list-ul { width: 100%; height: calc(100vw / 500 * 353); } } img { -webkit-user-drag: none; display: block; width: 100%; height: 100%; }Copy the code

JS:

const content = document.getElementById('listY');
const result = document.getElementById('result');
// The timer is used to check whether the scrolling is over
let timerScrollEndDetect = null;
// The rolling event begins
content.addEventListener('scroll'.function () {
    clearTimeout(timerScrollEndDetect);
    timerScrollEndDetect = setTimeout(function () {
      // If the scroll event is not triggered within 100 ms, the scroll is considered to have stopped
      // Check the position of list elements
      [].slice.call(content.children).forEach(function (eleList, index) {
        if (Math.abs(eleList.getBoundingClientRect().top - content.getBoundingClientRect().top) < 10) {
          // Add the flag class name
          eleList.classList.add('active');
          / / hint
          result.innerHTML = 'Scroll over, it's currently showing number one'+ (index + 1) +'list. ';
        } else {
          eleList.classList.remove('active'); }}); },100);
    
    / / hint
    result.innerHTML = 'Rolling... ';
});
Copy the code