0
これは私の画像です。私が説明したいこと。マウスのホバー上のスクロールゾーンを見つける...？
このマウスホバースクロールゾーンの上のエリアにマウスを置くと、この機能が実行されます。
verticalSlideDown();
私はこのマウスホバースクロールゾーン下領域に置くと、この関数が実行されます。しかし、このボトムスクロール領域をどのように測定し、この機能を実行できますか？
verticalSlideUp();
これは私のJSコード
function mousePositionTop(){
var x,y;
$(".scroll-middle-container").mousemove(function(event){
var offset = $(this).offset();
x = event.pageX - offset.left;
y = event.pageY - offset.top;
$("#result").html("X : "+x+" Y : "+y);
if (y >= 1 && y <= 150) {
//verticalSlideUp();
verticalSlideDown();
console.log("position Y : "+y);
} else{
var div= $(".scroll-inner-container");
div.stop();
}
});
};
mousePositionTop();
あるこのdivの高さ70vhと私のテキスト領域があります。 これは、HTML、CSSコード
<div class="scroll-inner-container">
<div class="paragraph-space content">
<h1>top position</h1>
<h3 id="result"></h3>
<p>Lorem ipsum</p>
<h1>end position</h1>
</div>
</div>
CSSコードです：ここで
.scroll-inner-container{
height: -moz-calc(70vh + 0px);
height: -webkit-calc(70vh + 0px);
height: calc(70vh + 0px);
overflow: auto;
object-fit: cover;
background-color: yellow;
position: relative;
}
は私の抜粋です
//Random Id Generator
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
//scroll function top
function verticalSlideUp(){
$(".scroll-inner-container").each(function(){
let id = makeid();
var div = $(this);
div.stop();
$(this).attr("id",id);
var remHeight = div[0].scrollHeight - $(this).height();
var scrollableHeight = remHeight - div.scrollTop();
var pos = div.scrollTop();
var remainingTime = (scrollableHeight - pos) * 100/5; //here 5 is a speed
// console.log("pos : "+ pos);
div.animate({
scrollTop:remHeight
},{
duration: remainingTime,
easing: "linear",
});
});
};
//scroll function down
function verticalSlideDown(){
$(".scroll-inner-container").each(function(){
let id = makeid();
var div = $(this);
div.stop();
$(this).attr("id",id);
var remHeight = div[0].scrollHeight - $(this).height();
var scrollableHeight = remHeight - div.scrollTop();
var pos = div.scrollTop();
// console.log("pos : "+ pos);
var remainingTime = (pos * 100)/5; //here 5 is a speed
div.animate({
scrollTop:0
},{
duration: remainingTime,
easing: "linear",
});
});
};
function mousePositionTop(){
var x,y;
$(".scroll-middle-container").mousemove(function(event){
var offset = $(this).offset();
x = event.pageX - offset.left;
y = event.pageY - offset.top;
$("#result").html("X : "+x+" Y : "+y);
if (y >= 1 && y <= 150) {
verticalSlideUp();
// verticalSlideDown();
console.log("position Y : "+y);
} else{
var div= $(".scroll-inner-container");
div.stop();
}
});
};.scroll-inner-container{
height: -moz-calc(70vh + 0px);
height: -webkit-calc(70vh + 0px);
height: calc(70vh + 0px);
overflow: auto;
object-fit: cover;
background-color: yellow;
position: relative;
}<div class="scroll-outer-container">
\t \t \t \t \t \t \t <div class="scroll-middle-container">
\t \t \t \t \t \t \t \t <span class="mouse-scroll-top-div"></span>
\t \t \t \t \t \t \t \t <div class="scroll-inner-container">
\t \t \t \t \t \t \t \t \t <div class="paragraph-space content">
\t \t \t \t \t \t \t \t \t \t <h1>top position</h1>
\t \t \t \t \t \t \t \t \t \t \t <h3 id="result"></h3>
\t \t \t \t \t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis omnis aspernatur quam minus tempora quis quibusdam officiis fuga asperiores, quos consectetur facilis recusandae, dolore voluptatibus iure laboriosam et perferendis commodi consequatur harum ullam ex praesentium. Officia facere unde animi dolore quisquam cum, expedita! Optio odio repudiandae quas saepe pariatur, necessitatibus aspernatur magni. Quasi aut enim explicabo ipsum provident eum molestias ut velit soluta nam, quam, cumque possimus natus sunt ipsam? Harum sunt nobis modi deleniti esse, dolorum laudantium earum obcaecati, a eos veniam odio, architecto illo debitis consequuntur iure eius quidem voluptatem possimus libero omnis, in laborum. Quisquam hic atque odit error suscipit beatae dolore eos molestiae alias repudiandae provident excepturi expedita, adipisci architecto, quia ex dolorem ab deleniti qui sapiente? Voluptate sed nam maiores eaque fugiat quibusdam laudantium optio quidem molestias commodi autem sunt obcaecati dignissimos tempora consequatur sit natus ad delectus voluptatibus, est, quis, praesentium dicta! Cupiditate ullam dolor laudantium esse nobis provident adipisci perferendis, minus dolore iure aliquam vero unde fuga magni id similique excepturi ea accusantium. Quos ea blanditiis iste repudiandae aspernatur aut quidem accusantium itaque consequuntur odit voluptas corporis in harum quo, voluptatibus exercitationem dolores, eveniet dignissimos voluptatem ducimus fugiat magni ullam. Ducimus magni optio consequuntur mollitia commodi ratione autem aspernatur expedita corrupti, voluptates ab numquam incidunt saepe eum sint distinctio provident cumque ullam, eveniet omnis, blanditiis assumenda dolorum. Dolorum, rem ducimus in tempore quae pariatur enim ut officia et minus labore soluta repellat nesciunt, velit iusto cupiditate! Quas nisi nostrum harum assumenda porro, corporis natus quod. Facilis repellat obcaecati pariatur corrupti, animi non. Neque nisi vero corporis quo tempora, voluptatum illum voluptates porro ipsum. Accusamus debitis doloribus nesciunt laudantium nobis explicabo ullam illo dicta adipisci, mollitia iure delectus aut nihil autem tempora laboriosam eum perspiciatis ipsa totam qui porro. Accusantium sequi molestiae, sint fugiat esse. Blanditiis sunt aliquam hic modi sit, quae fugit laboriosam culpa cum tenetur ea debitis officia dolorem sequi excepturi voluptatum velit adipisci, dolore sapiente, quaerat cumque nemo. Soluta eum molestias consequatur eligendi, quibusdam repellat dolorem, tempore aliquid commodi nisi provident excepturi debitis laudantium? Minus dolorum unde atque eum optio obcaecati ipsa necessitatibus laborum possimus commodi ea voluptas temporibus ut alias eligendi quas, nobis dolor, praesentium totam? Perspiciatis ad similique delectus earum totam iure incidunt! Debitis soluta fuga, veniam non vero neque rerum libero nesciunt minus. Voluptatum, natus, doloremque! Accusantium at doloribus, ipsum nostrum amet fugit quaerat in fugiat expedita excepturi, tenetur voluptatem totam autem dicta accusamus illum. Consequatur eos libero, odit, modi sit temporibus voluptates quae error magnam doloremque aliquid beatae facere! Earum expedita illum repudiandae minus nesciunt eum reiciendis sit nulla blanditiis temporibus qui laudantium, accusantium tempora quos similique? Repellat eaque accusantium blanditiis ab earum suscipit inventore commodi explicabo fugiat aliquam placeat, soluta rerum iste consectetur, minus debitis molestias dolorum harum obcaecati veritatis nihil quibusdam ipsam. Repellat sequi, tempora sed quae ipsum. Autem enim odio accusamus sequi, labore minus at corrupti aut earum alias itaque corporis vel perspiciatis laudantium rerum temporibus quaerat necessitatibus, iusto molestiae! Similique itaque a, fugiat!</p>
\t \t \t \t \t \t \t \t \t \t <h1>end position</h1>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
を試してみてください。 @ p.Frank。しかし、150px（下から150px）の範囲内にマウスを置くとスクロールがダウンします。これはスクロールダウン機能 'verticalSlideDown（）' – Masud001
です。アップデートスニペットを試してみてください。 'div.stop（）;'を削除し、2つの関数イベントを追加しました。あなたは2つの高さの間を移動しないための中間ステップを作ることができます。お試しください –
あなたはそれが欲しいですか？ @ Masud001 –