Question

这是我的形象。我要描述的内容..

当我将鼠标悬停在此鼠标悬停滚动区域顶部区域时，将运行此功能。

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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

      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">
							<div class="scroll-middle-container">
								<span class="mouse-scroll-top-div"></span>
								<div class="scroll-inner-container">
									<div class="paragraph-space content">
										<h1>top position</h1>
											<h3 id="result"></h3>
											<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>

										<h1>end position</h1>
									</div>
								</div>
								
							</div>

						</div>

Answer 1

您的问题是因为您已将mousemove事件放入函数中，而您永远不会调用它。我直接在加载页面上执行您的事件。请尝试

//Random Id Generator
    function makeid() {
      var text = "";
      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

      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 = (remHeight - pos) * 100 / 5; 

            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",

            });

        });
    };

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);
    var div= $(".scroll-inner-container");
    if (y >= 1 && y <= 50 ) {
        verticalSlideDown();
    }else if (y >= ($(this).outerHeight() - 50) ) {
        verticalSlideUp();
    }else{
        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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-outer-container">
	<div class="scroll-middle-container">
		<span class="mouse-scroll-top-div"></span>
		<div class="scroll-inner-container">
			<div class="paragraph-space content">
				<h1>top position</h1>
					<h3 id="result"></h3>
					<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>
				<h1>end position</h1>
			</div>
		</div>	
	</div>
</div>

在鼠标悬停上找到滚动区... ...

1 个答案: