我想通過在頁面上的任何位置滾動來觸發帶有溢位內容的 div 的滾動，而不僅僅是通過移動滑鼠并在 div 內單擊。另外，我想隱藏 div 的滾動條，以便只有頁面的滾動條可見。
let viewportHeight = $("body").innerHeight();
let contTopPositionArray = [];
let imageHeightArray = [];
let containerHeightArray = [];
let containerIDArray = [];
jQuery(window).on("scroll", function() {
var scroll = $(window).scrollTop();
//console.log(scroll);
containerIDArray.forEach((element, index) => {
var tempOffset = $('#' element).offset();
console.log(tempOffset.top)
if (tempOffset.top < scroll viewportHeight && tempOffset.top containerHeightArray[index] < scroll) {
console.log('i can see you', element);
}
});
});
$('.container').each(function(index, el) { //vrti funkciju za svaki conteiner na stranici
var contPost = $(this).offset();
contTopPositionArray.push(contPost.top); // skuplja gde se nalazi conteiner sa slikom od vrha stranice, tj njegova top pozicija
console.log(contTopPositionArray);
var imgageHeigth = $('.col2 img', this).height();
imageHeightArray.push(imgageHeigth); // skuplja visinu slike
console.log(imageHeightArray);
var conteinerHeigth = $('.col2', this).height();
containerHeightArray.push(conteinerHeigth); // skuplja koliko je veliki div gde se slika nalazi
containerIDArray.push($(this).attr('id')); // skuplja koji je ID za red
console.log(containerIDArray);
var moveImageCalc = -(imageHeightArray[index] - conteinerHeigth[index] * ((imageHeightArray[index] - conteinerHeigth[index]) / viewportHeight));
console.log(moveImageCalc)
});
jQuery(window).on("scroll", function() {
var scroll = $(window).scrollTop();
//console.log(scroll);
containerIDArray.forEach((element, index) => {
var tempOffset = $('#' element).offset();
console.log(tempOffset.top);
if (tempOffset.top < scroll viewportHeight && tempOffset.top containerHeightArray[index] < scroll) {
// mesto 500 treba da napravim funckiju koja ce automatski da racuna visinu slike i skrola kroz nju
$('#' element ' img').css('top', moveImageCalc);
console.log('i can see you', element);
}
});
});
var scroll =
window.requestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
var elementToShow = document.querySelectorAll(
".col2"
);
function loop() {
elementToShow.forEach(function(element) {
if (isElementInViewport(element)) {
element.classList.add("class");
} else {
element.classList.remove("class");
}
});
scroll(loop);
}
loop();
function isElementInViewport(el) {
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
(rect.top <= 0 && rect.bottom >= 0) ||
(rect.bottom >=
(window.innerHeight || document.documentElement.clientHeight) &&
rect.top <=
(window.innerHeight || document.documentElement.clientHeight)) ||
(rect.top >= 0 &&
rect.bottom <=
(window.innerHeight || document.documentElement.clientHeight))
);
}.container {
max-width: 80rem;
height: 80vh;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 4rem;
}
.col1 {
flex: 0 0 45%;
}
.col2 {
flex: 1;
height: 200px;
overflow: scroll;
position: relative;
}
.col2 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="first">
<div id="scrollMeToo" class="col1">
<h2>Project 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem deleniti ipsam rem fugit facilis. Quaerat aliquid omnis sunt praesentium laudantium rem unde natus deleniti amet, labore maiores eos ratione doloribus at provident autem facere?</p>
<a href="#" class="btn">Click</a>
</div>
<div class="col2">
<img src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="container " id="second">
<div class="col1">
<h2>Project 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem deleniti ipsam rem fugit facilis. Quaerat aliquid omnis sunt praesentium laudantium rem unde natus deleniti amet, labore maiores eos ratione doloribus at provident autem facere?</p>
<a href="#" class="btn">Click</a>
</div>
<div class="col2">
<img src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="container" id="tird">
<div class="col1">
<h2>Project 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem deleniti ipsam rem fugit facilis. Quaerat aliquid omnis sunt praesentium laudantium rem unde natus deleniti amet, labore maiores eos ratione doloribus at provident autem facere?</p>
<a href="#" class="btn">Click</a>
</div>
<div class="col2">
<img src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="container" id="fourth">
<div id="scrollMeToo" class="col1">
<h2>Project 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptatem deleniti ipsam rem fugit facilis. Quaerat aliquid omnis sunt praesentium laudantium rem unde natus deleniti amet, labore maiores eos ratione doloribus at provident autem facere?</p>
<a href="#" class="btn">Click</a>
</div>
<div class="col2">
<img src="https://picsum.photos/200/300" alt="">
</div>
</div>（也在https://codepen.io/Pavle1993/pen/poreRjW）
如果有人知道更簡單的解決方案，我將不勝感激與我分享。謝謝。
var moveImageCalc = - (imageHeightArray[index] - conteinerHeigth[index] * ((imageHeightArray[index] - conteinerHeigth[index])/viewportHeight));
console.log(moveImageCalc) // NaN
uj5u.com熱心網友回復：
您的代碼中有語意錯誤。run 是非法的conteinerHeight[index]，其中conteinerHeight是一個數值。我很確定你的意思containerHeightArray[index]。請參閱下面更正的代碼片段：
$('.container').each(function(index, el) { //vrti funkciju za svaki conteiner na stranici
var contPost = $(this).offset();
contTopPositionArray.push(contPost.top); // skuplja gde se nalazi conteiner sa slikom od vrha stranice, tj njegova top pozicija
console.log(contTopPositionArray);
var imgageHeigth = $('.col2 img', this).height();
imageHeightArray.push(imgageHeigth); // skuplja visinu slike
console.log(imageHeightArray);
var conteinerHeigth = $('.col2', this).height();
containerHeightArray.push(conteinerHeigth); // skuplja koliko je veliki div gde se slika nalazi
containerIDArray.push($(this).attr('id')); // skuplja koji je ID za red
console.log(containerIDArray);
var moveImageCalc = -(imageHeightArray[index] - containerHeigthArray[index] * ((imageHeightArray[index] - containerHeigthArray[index]) / viewportHeight));
console.log(moveImageCalc)
});
關于你的問題：
另外，我想隱藏 div 的滾動條，以便只有頁面的滾動條可見。
請參閱此stackOverflow 問題的答案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/341609.html
標籤：javascript 查询