Как остановить горизонтальный скрол?

156

30 апреля 2019, 06:50

Как остановить горизонтальный скролл, а затем скролить по горизонтали в обратном направлении.

Проблема в том что переменная x продолжает увеличиваться А за ней и все остальные, musclesMove,move.

Как остановить функцию, чтобы при дальнейшем прокручивании колёсика мышки значения musclesMove,move,x не росли? И потом Можно было бы использовать эту функцию для прокручивания в обратную сторону.

Заранее спасибо.

document.body.style.cssText = `overflow-x: hidden;`; 
 
let monitorW = document.body.clientWidth; 
let monitorH = document.body.clientHeight; 
 
let slider = document.querySelector('.slider'); 
 
let allSliderS = slider.children; 
 
let allImgWidth = 0; 
 
for (let i = 0, max = allSliderS.length; i < max; i++) { 
    allImgWidth += containerWidth(allSliderS[i]); 
} 
 
function containerWidth(element) { 
    let elemWidth; 
    let compStyle = getComputedStyle(element); 
    let mL = parseFloat(compStyle.marginLeft); 
    let mR = parseFloat(compStyle.marginRight); 
    let imCont = parseFloat(compStyle.width); 
    let pl = parseFloat(compStyle.paddingLeft); 
    let pr = parseFloat(compStyle.paddingRight); 
    elemWidth = pl + mL + imCont + mR + pr; 
    return elemWidth; 
} 
 
function containerHeigth(element) { 
    let elmHeigth; 
    let compStyle = getComputedStyle(element); 
    let mT = parseFloat(compStyle.marginTop); 
    let mB = parseFloat(compStyle.marginBottom); 
    let imCont = parseFloat(compStyle.height); 
    let pT = parseFloat(compStyle.paddingTop); 
    let pB = parseFloat(compStyle.paddingBottom); 
    elmHeigth = pT + mT + imCont + mT + pB; 
    return elmHeigth; 
} 
 
function stepImg(allImgWidth, imgMove) { 
    slider.style.cssText = ` 
position:relative;  
opacity: 1;  
width: ${allImgWidth}px;  
transform: translate3d(-${imgMove}px, 0px, 0px); 
top: 0; 
left:0;`; 
} 
 
 
stepImg(allImgWidth, 0); 
 
 
 
//вот этот код вращает слайдер. Там пока есть баг в том что если ты крутить колесико когда уже картинки не двигаются То всеравно переменная (х) плюсуется. 
 
 
if (slider.addEventListener) { 
    if ('onwheel' in document) { 
        // IE9+, FF17+, Ch31+ 
        slider.addEventListener("wheel", moveSlider); 
    } else if ('onmousewheel' in document) { 
        // устаревший вариант события 
        slider.addEventListener("mousewheel", moveSlider); 
    } else { 
        // Firefox < 17 
        slider.addEventListener("MozMousePixelScroll", moveSlider); 
    } 
} else { // IE8- 
    slider.attachEvent("onmousewheel", moveSlider); 
} 
 
let move = 0; 
 
function moveSlider(e) { 
    e = e || window.event; 
 
    /* 
     if (e.target.classList.contains('imgItem')) { 
     let imgContainer = e.target.closest('.imgContainer'); 
     // move += containerWidth(imgContainer); 
     stepImg(allImgWidth, move); 
     } 
     */ 
 
    e.preventDefault ? e.preventDefault() : (e.returnValue = false); 
 
    let x = e.deltaY || e.detail || e.wheelDelta; 
    move += x; 
    let musclesMove = move * 15; 
 
    if (allImgWidth - musclesMove >= monitorW) { 
 
        stepImg(allImgWidth, musclesMove); 
 
    } 
    console.log(musclesMove,move,x); 
 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>slider</title> 
    <style> 
        * { 
            box-sizing: border-box; 
        } 
 
        .content { 
            margin: 0 auto; 
            word-wrap: break-word; 
            word-break: break-all; 
            width: 50%; 
        } 
 
        .slider { 
            font-size: 0; 
        } 
 
        .imgContainer { 
            display: inline-block; 
            vertical-align: middle; 
            width: 350px; 
            height: 100%; 
            overflow: hidden; 
            margin: 10px 20px; 
        } 
 
        .imgItem { 
            width: 100%; 
            height: auto; 
        } 
 
    </style> 
</head> 
<body> 
 
<div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis dolore eaque. Maxime, quod, repellat? 
        Aspernatur magnam magni quos saepe! Aperiam corporis dignissimos fugit, ipsum maiores nobis quod reprehenderit 
        repudiandae? 
    </p> 
</div> 
<h2 id="delta"></h2> 
 
<div class="slider"> 
    <div class="imgContainer"> 
        <img class="imgItem" src="https://focus.ua/modules/thumb.php?u=../files/SABi/2017/025/2615387.jpg&m=c_large_wide"> 
    </div> 
    <div class="imgContainer" style="width: 500px" > 
        <img class="imgItem" src="https://st3.depositphotos.com/13349494/17637/i/450/depositphotos_176371606-stock-photo-christmas-bokeh-lights-wooden-surface.jpg"> 
    </div> 
    <div class="imgContainer" style="width: 800px"> 
        <img class="imgItem" src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"> 
    </div> 
    <div class="imgContainer"> 
        <img class="imgItem" src="http://v.img.com.ua/b/1100x999999/c/56/8ba9bc764b70f240e583b1e71c33e56c.jpg"> 
    </div> 
    <div class="imgContainer"> 
        <img class="imgItem" src="https://cdn.fishki.net/upload/post/2017/03/19/2245758/tn/07-cute-cat-wallpaper-hdcat-wallpaper.jpg"> 
    </div> 
    <div class="imgContainer"> 
        <img class="imgItem" src="http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg"> 
    </div> 
    <div class="imgContainer"> 
        <img class="imgItem" src="data:image/jpeg;base64,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"> 
    </div> 
    <div class="imgContainer"> 
        <img class="imgItem" src="https://i.pinimg.com/originals/32/be/70/32be70b9a7b873fa561333ce76f013ff.jpg"> 
    </div> 
    <div class="imgContainer"> 
        <img class="imgItem" src="https://cdn.fishki.net/upload/post/2017/03/19/2245758/tn/02-funny-cat-wallpapercat-wallpaper.jpg"> 
    </div> 
</div> 
 
<div class="content"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dignissimos fugiat laudantium, modi 
        molestias 
        nesciunt omnis perspiciatis qui reiciendis sed sequi similique sunt ullam veniam, veritatis. Dicta enim 
        laboriosam 
        voluptas. 
    </p> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum earum et ipsum maiores placeat quibusdam 
        repudiandae, veniam! Accusamus aliquid autem enim eum hic impedit in iure molestiae quia sit? 
    </p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dignissimos fugiat laudantium, modi 
        molestias 
        nesciunt omnis perspiciatis qui reiciendis sed sequi similique sunt ullam veniam, veritatis. Dicta enim 
        laboriosam 
        voluptas. 
    </p> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum earum et ipsum maiores placeat quibusdam 
        repudiandae, veniam! Accusamus aliquid autem enim eum hic impedit in iure molestiae quia sit? 
    </p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dignissimos fugiat laudantium, modi 
        molestias 
        nesciunt omnis perspiciatis qui reiciendis sed sequi similique sunt ullam veniam, veritatis. Dicta enim 
        laboriosam 
        voluptas. 
    </p> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum earum et ipsum maiores placeat quibusdam 
        repudiandae, veniam! Accusamus aliquid autem enim eum hic impedit in iure molestiae quia sit? 
    </p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dignissimos fugiat laudantium, modi 
        molestias 
        nesciunt omnis perspiciatis qui reiciendis sed sequi similique sunt ullam veniam, veritatis. Dicta enim 
        laboriosam 
        voluptas. 
    </p> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum earum et ipsum maiores placeat quibusdam 
        repudiandae, veniam! Accusamus aliquid autem enim eum hic impedit in iure molestiae quia sit? 
    </p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dignissimos fugiat laudantium, modi 
        molestias 
        nesciunt omnis perspiciatis qui reiciendis sed sequi similique sunt ullam veniam, veritatis. Dicta enim 
        laboriosam 
        voluptas. 
    </p> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum earum et ipsum maiores placeat quibusdam 
        repudiandae, veniam! Accusamus aliquid autem enim eum hic impedit in iure molestiae quia sit? 
    </p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dignissimos fugiat laudantium, modi 
        molestias 
        nesciunt omnis perspiciatis qui reiciendis sed sequi similique sunt ullam veniam, veritatis. Dicta enim 
        laboriosam 
        voluptas. 
    </p> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum earum et ipsum maiores placeat quibusdam 
        repudiandae, veniam! Accusamus aliquid autem enim eum hic impedit in iure molestiae quia sit? 
    </p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dignissimos fugiat laudantium, modi 
        molestias 
        nesciunt omnis perspiciatis qui reiciendis sed sequi similique sunt ullam veniam, veritatis. Dicta enim 
        laboriosam 
        voluptas. 
    </p> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum earum et ipsum maiores placeat quibusdam 
        repudiandae, veniam! Accusamus aliquid autem enim eum hic impedit in iure molestiae quia sit? 
    </p> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dignissimos fugiat laudantium, modi 
        molestias 
        nesciunt omnis perspiciatis qui reiciendis sed sequi similique sunt ullam veniam, veritatis. Dicta enim 
        laboriosam 
        voluptas. 
    </p> 
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum earum et ipsum maiores placeat quibusdam 
        repudiandae, veniam! Accusamus aliquid autem enim eum hic impedit in iure molestiae quia sit? 
    </p> 
</div> 
<script src="main.js"></script> 
</body> 
</html>