HTML / CSS列滚动 [英] HTML / CSS Column Scrolling

问题描述

我的页面上有两列。

左栏是一个长列表，右边是小列。

The left column is one long list, the right is smaller.

当我向上和向下滚动时，我想要正确的列浮动，页面不是静态的。

When I scroll up and down I want the right column to float with the page not be static.

我设法使用这个css ：

I've managed to get this working using this css:

    .connected {
        min-height:100px;
        float: left;
        width: 200px;
    }
    .connected.right {
        position: fixed; 
        min-height:100px;
        height: auto;
        float: right;
    }

，可在此处查看 FIDDLE 。

and can be seen here on this FIDDLE.

我遇到的问题是right column is long，then it does not move at all and the bottom entries are not accessible。

The issue I have is if the right column is long, then it doesn't move at all and the bottom entries aren't accessible.

有任何方法可以让正确的列滚动，但只有

Is there any way to get the right column to scroll but only until you reach the end of it, then it is fixed untill you start scrolling back up ?

感谢

推荐答案

如何在右边的列中设置 overflow：auto; ？

What about setting overflow: auto; to the right column?

.connected.right {
    position: fixed;
    overflow: auto;
    min-height:100px;
    height: 200px;
    float: right;
}

这将设置滚动到它，并将允许滚动，直到

This will set a scroll to it and will allow scrolling until the very end of the column.

演示： https：// jsfiddle。 net / 8fxosb5f / 2 /

也可以通过设置 overflow：auto 到两列。但是这种方式你需要设置一定高度的那些列。结果可能不是你需要的，仍然是一个演示：

Or you can remove the window scroll by setting overflow: auto to both columns. But that way you need to set a certain height of those columns. The result might not be what you need, still here's a demo:

https://jsfiddle.net/8fxosb5f/3/

这里有一个非常粗糙的代码，但我认为你会设置为符合你的需求：（它需要jQuery）

Here's a really rough code, but I think you will manage to set it to fit your needs: (it requires jQuery)

var columnHeight = $('.right').outerHeight(true);

var windowHeight = $(window).height();
$(window).scroll(function () {

    if ($(this).scrollTop() + windowHeight >= columnHeight) {
        $('.right').css({
            position: 'fixed',
            top: -(columnHeight - windowHeight)
        });
    } else {
        $('.right').css({
            position: 'static',
            top: 'auto'
        });
    }
});

演示： https://jsfiddle.net/8fxosb5f/5/

这篇关于HTML / CSS列滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！