滚动区域内固定的 div

Question

我需要将宽度为980像素，高度为500像素（class="main"）的网站主体只在鼠标悬停在一个滚动div上时固定，并且该滚动div具有1500像素的高度和100%的宽度（class="container-scroll"），该滚动div位于具有500像素高度的其他div内（class="container"）。

感到很困惑，对吗？

我已经创建了一个示例，我已经接近目标，问题是如果我将主体设置为固定，它将随着页面一起滚动，而不仅仅是在div内部滚动。

这是我的示例：https://jsfiddle.net/8oj0sge4/1/embedded/result/

HTML：

<div id="wrapper">
    <div class="container">
        <div class="container-scroll">
            <div class="main">

            </div>
        </div>
    </div>
</div>

CSS：

    #wrapper {
        width: 100%;
        height: 1500px;
        border: 1px solid red;
        padding-top: 380px;
    }
    #wrapper .container {
        border: 1px solid green;
        width: 100%;
        height: 500px;
        overflow: scroll;
    }
    #wrapper .container-scroll {
        height: 1500px;
        width: 100%;
        border: 1px solid yellow;
    }
    #wrapper .main {
        width: 980px;
        height: 500px;
        background: black;
        overflow: scroll;
        /*position: fixed;*/
    }

- user3998237

---

所以您想要在内部 div 中启用滚动，仅当滚动从该 div 开始时。否则，您仍希望主页面滚动。这是正确的吗？因为我有点困惑您真正想做什么。 - floribon

抱歉，我的英语不太好，哈哈.. 是的！当滚动启用时，我需要将 .main 固定。 - user3998237

我从昨天开始就一直在绞尽脑汁，但是所有的方法都没有奏效... --' - user3998237

这个需求是否只能使用CSS实现，还是可以使用JavaScript？我知道你的标签中有jQuery等内容，但似乎你并没有探索那些解决方案... - DrCord

Js可以在@DrCord中使用。 - user3998237

Answer 1

如果我理解正确，您希望主要

保持在父

的顶部？

Fiddle: https://jsfiddle.net/8oj0sge4/3/（完整版）

所做的更改：

• #wrapper .main: 添加position:absolute（"fixed" to parent）
• #wrapper .container-scroll: 添加position:relative（确定要“fix”到哪个父级中）
• 为主
  添加了ID（方便起见）

JavaScript代码：

var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight; // Make sure we don't go outside the parent

main.parentNode.parentNode.onscroll = function() {
   main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}

- TiiJ7

---

太好了！非常感谢 @Tiij7.. 恭喜！ - user3998237

Answer 2

没有纯CSS实现这个功能的方法，但是你可以使用一些Javascript来解决。

一种解决方案是，如果滚动条在#wrapper上启动，则禁用内部div上的滚动。这在这个fiddle上进行了演示：

https://jsfiddle.net/qmjmthbz/

以下是代码：

var wrapper = $('#wrapper');
var container = $('.container');
var timer;

// Listen to mouse scroll events
$('body').on('mousewheel', function(e) {
    var target = $(e.target);
    /* If the scroll is initiated from the #wrapper,
       disable scroll on the container and re-enable it
       100ms after the last scroll event */
    if (target[0] === wrapper[0]) {
        container.addClass('no-scroll');
        clearTimeout(timer);
        timer = setTimeout(function() {
            container.removeClass('no-scroll');
        }, 100);
    }
});

注意: 使用jQuery实现这个功能是无用的，但我正在火车站赶时间。我会在找到更多时间时提供更好的代码 :-)

- floribon

---

这个 fiddle 中的 main 不是固定的 @floribon - user3998237

抱歉@MrBear，我想我还是不明白你想要什么。我以为你想在不捕获滚动事件的情况下向“上方”滚动容器:( - floribon

我不知道是我的英语不好还是我没有解释清楚。我想要让MAIN和.CONTAINER一起滚动，但如果我将MAIN设置为固定位置，它将随着整个页面一起滚动，而不仅仅是在.CONTAINER内部。 - user3998237

Answer 3

基本上我认为你不能使div滚动，因为div的内容没有超过div的高度。为了使div可滚动，内容实际上应该超过div的高度。

尝试给div一个高度，比如说100像素，并插入足够多的文本以超过100像素的高度，从而使div可滚动，然后尝试你想要实现的效果是否有效。

- Guinn