如何在div右侧停止水平滚动

Question

你好，我是新的代码，我试图停止水平滚动时，div号2是完全可见的(这样div 3是不可见的，但周围甚至有)。我的代码:

$(document).ready(function() {

$(window).scroll(function() {
var stopScroll = $('.block-2').offset().left;

if ($(window).scrollLeft() > $('.block-2').offset().left) {
$(window).scrollLeft(stopScroll);
}
});
});

body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}

header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;

}

.wrap {
padding-top: 74px;
margin: 0;
flex-wrap: nowrap!important;
flex-direction: row!important;
display: flex;
}

.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
flex: 0 0 100%;
width: 90vw;
}

.block-1,
.block-2 {
height: 500px;
text-align: center;
}

p {
margin-top: 185px;
}

.block-1 {
background: #27AACC;
color: #FFF;
}

.block-2 {
background: #668E99;
color: #FFF
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="block-1">
<div class="container">

</div>
</div>
<div class="block-2">
<div class="container">

</div>
</div>
<div class="block-1">
<div class="container">

</div>
</div>
</div>

我在这个论坛上受到启发，编写了这段代码。我试着测试了很多解决方案，但那不是步行。你知道我在哪里可以试试这个吗?

Answer 1

我想，这解决了你的问题。

$(document).ready(function() {
$(window).scroll(function() {
var wrapWidth = $('.wrap').width();
var secondBoxWidth = $('.block-2').offset().left;
var scrollable = $('.wrap')[0].scrollWidth;
var breakPoint = scrollable - (wrapWidth + secondBoxWidth);
if ($(window).scrollLeft() >= breakPoint) {
$(window).scrollLeft(breakPoint);
return;
}
});
});

body {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 300;
margin-top: 0;
}
header {
width: 100%;
height: 50px;
line-height: 50px;
position: fixed;
font-size: 24px;
font-weight: 700;
color: #FFF;
padding: 12px 0;
margin: 0;
background: #252525;
}
.wrap {
padding-top: 74px;
margin: 0;
flex-wrap: nowrap!important;
flex-direction: row!important;
display: flex;
}
.container {
width: 960px;
margin: 0 auto;
overflow: hidden;
flex: 0 0 100%;
width: 90vw;
}
.block-1,
.block-2 {
height: 500px;
text-align: center;
}
p {
margin-top: 185px;
}
.block-1 {
background: #27AACC;
color: #FFF;
}
.block-2 {
background: #668E99;
color: #FFF
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="block-1">
<div class="container">
</div>
</div>
<div class="block-2">
<div class="container">
</div>
</div>
<div class="block-1">
<div class="container">
</div>
</div>
</div>

纯JS解决方案

document.addEventListener('DOMContentLoaded', function () {
const scrollFunc = () => {
const wrap = document.querySelector('.wrap');
const wrapWidth = document.querySelector('.wrap').offsetWidth;
const secondBoxWidth = document.querySelector('.block-2').offsetWidth;
const scrollable = wrap.scrollWidth;
const start = Math.round(window.scrollX);
const breakPoint = scrollable - (wrapWidth + secondBoxWidth);
if (start >= breakPoint) {
window.scrollTo(breakPoint, 0);
return;
}
};
document.addEventListener('scroll', scrollFunc);
});