Question

在解决了我的最后一个问题后，我又遇到了第二个问题。我有一个固定的div。固定div的内部是另一个可滚动的div。我想实现以下目标：即使我在页面上的任意位置滚动，甚至不在可滚动div之外，滚动操作也仅适用于可滚动div，而不适用于固定div。

我举例说明了这个问题。我想实现的目标是，即使我在任何地方滚动，即使在红色部分，滚动动作也都在红色div中。

演示：

 $(window).scroll(function () {
   var s = $(this).scrollTop();
   var row1 = $('#row1');
   if(s>500){
        row1.css({
            'position': 'relative'
        });
   }
 
});

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: scroll;
  height: 100vh;
}

#row1 {
  width: 100vw;
  height:100vh;
  position: fixed;
  background-color:red;
}

.col-sm-6{width:50%;float:left;height:100px;}
#test{background-color:green;overflow-x:scroll;}
body{height:1000px}

<div class="row" id="row1">
<div class="col-sm-6"></div>
<div class="col-sm-6" id="test">scrollable div<br>test1<br>test2<br>test3<br>test4<br>test5<br>test6<br>test7<br>test8<br>test9<br>test10<br>test11</div>
</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 1

$(function () {
    var myCounter = 0,
        myOtherCounter = 0;
    var scroll = 0;

    $("#test").scroll(function () {
        myCounter = myCounter + 1;
        $("#log").html("<div>Handler for .scroll() called " + myCounter + " times.</div>");
    });

    //Firefox
    $('#row1').bind('DOMMouseScroll', function (e) {
        if (e.originalEvent.detail > 0) {
            scrollDown();
        } else {
            scrollUp();
        }

        //prevent page fom scrolling
        return false;
    });

    //IE, Opera, Safari
    $('#row1').bind('mousewheel', function (e) {
        if (e.originalEvent.wheelDelta < 0) {
            scrollDown();
        } else {
            scrollUp();
        }
        //prevent page fom scrolling
        return false;
    });
    
    function scrollDown() {
        //scroll down
        console.log('Down ' + scroll);
        if (scroll < $('#test').find('div').height() - $('#test').height() + 20) {
            scroll = $('#test').scrollTop() + 5;
            $('#test').scrollTop(scroll);
        }
    };
    function scrollUp() {
        //scroll up
        console.log('Up ' + scroll);
        if (scroll > 0) {
            scroll = $('#test').scrollTop() - 5;
            $('#test').scrollTop(scroll);
        }
    };
});

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: scroll;
  height: 100vh;
}

#row1 {
  width: 100vw;
  height:50vh;
  position: fixed;
  background-color:red;
}

.col-sm-6{width:50%;float:left;height:100px;}
#test{background-color:green;overflow-x:scroll;}
body{height:1000px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="row1">
<div class="col-sm-6" id="test"><div>scrollable div<br>test1<br>test2<br>test3<br>test4<br>test5<br>test6<br>test7<br>test8<br>test9<br>test10<br>test11</div></div>
  <div id="log"></div>
    <div id="log2"></div>
</div>

将页面滚动转换为内部div的滚动百分比

演示：

1 个答案: