Javascript 固定div内滚动div

我需要使我的站点的主节点的宽度

980px

和高度

500px

（class=“main”）只有在鼠标位于滚动div上并且高度

为1500px

和宽度

为100%

（class=“container scroll”）时才会被固定，这是在另一个高度

为500px的div内。

（class=“container”）

很困惑，对吧

我做了一把小提琴，我就快到了，问题是如果我把main设置为fixed，它会随着页面滚动，而不仅仅是在div内部

这是我的小提琴：

HTML:

---

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

---

尝试将div的高度设为100px，并插入足够大的文本，使其超过100px的高度，从而使div可滚动，然后尝试实现您想要的效果。

没有纯CSS可以做到这一点，但您可以使用一些Javascript来解决它

一种解决方案是，如果在

#wrapper

上启动了滚动，则禁用内部

div

上的滚动，这将在此小提琴上演示：

代码如下：

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来实现这一点是没有用的，但我正在火车站赶时间。当我能找到更多时间时，我会提供更好的代码：-）

如果我理解正确，你想让主div保持在父div的顶部吗

小提琴：（）

所作的修改：

• #wrapper.main

  ：添加了

  位置：绝对

  （“固定”到父级）

• #包装器。容器滚动

  ：添加了

  位置：相对

  （确定要“修复”的父级）
• 在主div中添加了一个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";
}

---

因此，您希望仅当滚动从该div开始时才启用内部div中的滚动。否则，您仍然希望主页滚动。对吗？因为我有点搞不懂你到底想做什么对不起，我的英语不好，我知道哈哈。。对当滚动被启用时，我需要修复.main..我从昨天开始就在绞尽脑汁，所有我没有工作的地方..--'这是只需要css还是可以使用JavaScript？我知道你的标签上写着jQuery等，但你似乎没有探索这些解决方案……Js可以在@drcord使用，main在这个fiddle@floribonSorry@MrBear中没有固定，我想我还是不明白你想要什么。我以为您想在容器“上方”滚动而不捕获滚动事件：（我不知道我的英语是否糟糕，或者我的解释是否不正确。我希望主卷轴与.CONTAINER一起滚动，但如果我将MAIN设置为=固定位置，它将与整个页面一起滚动，而不仅仅是在.CONTAINERPerfect内！非常感谢@Tiij7..恭喜！

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);
    }
});

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";
}