Reverse Scrolling

here is the solution - http://jsfiddle.net/5UUtV/1/

var winHeight = $(window).innerHeight();
$(document).ready(function () {
    $(".panel").height(winHeight);
    $("body").height(winHeight*$(".panel").length);
});

window.addEventListener('resize', function (event) {
    $(".panel").height($(window).innerHeight());
});
$(window).on('scroll',function(){
    $(".panelCon").css('bottom',$(window).scrollTop()*-1);
});

HTML

<body>
    <div class="panelCon"> 
    <div id="pane-5" class="panel">
        <h1>5</h1>
    </div>
    <div id="pane-4"class="panel">
        <h1>4</h1>
    </div>
    <div id="pane-3"class="panel">
        <h1>3</h1>
    </div>
    <div id="pane-2" class="panel">
        <h1>2</h1>
    </div>
    <div id="pane-1" class="panel">
        <h1>1</h1>
    </div>
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
}
.panelCon{
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
}
.panel {
    width: 100%;
}
.panel h1 {
    width: 100px;
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
    top: 50%;
}
#pane-1 {
    background-color: green;
}
#pane-2 {
    background-color: red;
}
#pane-3 {
    background-color: white;
}
#pane-4 {
    background-color: pink;
}
#pane-5 {
    background-color: yellow;
}

Reverse scrolling with keys (not mouse)

The first issue is that you are listening to keyup events on the element with id #search, it's more common to listen on the window as it let's you catch the event globally (anywhere on the page). The setInterval is also unnecessary you can remove that and update iScroll before doing the actual scroll instead.

$(document).ready(function () {
  var iScroll = $(window).scrollTop();

  $(window).keydown(function(e) {
    e.preventDefault()
    if (e.keyCode == 40) {
      // Scroll to the current scroll position - 1000
      iScroll = -1000;
    }
    if(e.keyCode == 38) {
      // Scroll to the current scroll position + 1000
      iScroll = 1000;
    }
  });

  // Check where to scroll to
  setInterval(function(){
    $('html, body').animate({
      scrollTop: $(window).scrollTop() + iScroll
    }, 1000);
    // Reset iScroll so that we don't keep scrolling automatically
    iScroll = 0;
  }, 1100)
});

https://jsfiddle.net/wgm1gtx6/

Divs Reverse scroll with translateY() in react.js

The sample site you linked actually uses the wheel event rather than the scroll event. It looks like they use this library to accomplish it: https://swiperjs.com/demos/ . My understanding is that the scroll event only fires if there's a scrollbar, which is why your event handler didn't fire.

I've created a Code Sandbox that produces the effect you want in React. It does rely on jQuery to compute the height of the whole element, and to set the initial transformation for the left half. However, those are just convenience methods, and if you don't want jQuery as a dependency, you can find workarounds for those pretty easily.

Reverse scrolling with HTML5

You can override scrolling with jQuery. Simple like this:

$(window).scroll(function() {
// TODO scrolling
});

If you want to create a page like you linked, you need two main section on your page. A left and a right side. While the left content is normally scrolled, you reverse the content of the right section, and every time when the window scrolled you need to get the offset-from top. After that you set the top position of the right section.
Here is the example: http://jsfiddle.net/338R8/25/

RecyclerView reverse endless scrolling

The reverseLayout property on a RecyclerView's LayoutManager will do what you want.

Kotlin:

myRecyclerView.layoutManager = LinearLayoutManager(
    context = this,
    orientation = LinearLayoutManager.VERTICAL,
    reverseLayout = true
).apply { stackFromEnd = true }

XML:

<androidx.recyclerview.widget.RecyclerView
    ...
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    app:reverseLayout="true"
    app:stackFromEnd="true"
    android:orientation="vertical />

You can set stackFromEnd to false if you don't want your items to stack from bottom.

Reverse Scrolling

Reverse Scrolling

Reverse scrolling with keys (not mouse)

Divs Reverse scroll with translateY() in react.js

Reverse scrolling with HTML5

RecyclerView reverse endless scrolling

Related Topics

Leave a reply