修复了滚动 div 内的 div

Posted 2023-02-22

【中文标题】修复了滚动 div 内的 div

【英文标题】：Fixed div inside scrolling div

【发布时间】：2014-12-02 06:24:44

【问题描述】：

我需要将具有980px width 和500px height (class="main") 的网站的主要内容仅在鼠标悬停在滚动div 上并且具有height of 1500px 和width of 100% 时才能修复(class="container-scroll")，即在其他 div 中，height of 500px. (class="container")

很困惑，对吧？

我做了一个fiddle，我快到了，问题是如果我将main设置为fixed，它会随着页面滚动，而不仅仅是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;*/
    

【问题讨论】：

因此，您只想在滚动从该 div 开始时启用内部 div 中的滚动。否则你还是要在主页面滚动。那是对的吗？因为我对你真正想做的事情有点困惑

对不起，我英语不好，我知道哈哈..是的！当启用滚动时，我需要修复 .main ..

我从昨天开始就在绞尽脑汁，我没有工作..--'

这需要只有 css 还是可以使用 javascript？我知道你的标签说 jQuery 等，但你似乎没有探索这些解决方案......

Js可以用@DrCord

【参考方案1】：

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

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

【参考方案2】：

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

如果滚动已在 #wrapper 上启动，则一种解决方案可能是禁用内部 div 上的滚动，这在此小提琴上进行了演示：

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主要不固定

对不起@MrBear 我想我还是不明白你想要什么。我以为您想在不捕获滚动事件的情况下滚动容器“上方”:(

我不知道是我的英语不好还是我解释的不对。我希望 MAIN 与 .CONTAINER 一起滚动，但如果我将 MAIN 设置为 = 固定位置，它将与整个页面一起滚动，而不仅仅是在 .CONTAINER 内

【参考方案3】：

如果我理解正确，您希望主 div 保持在父 div 的顶部吗？

小提琴：https://jsfiddle.net/8oj0sge4/3/ (full)

所做的更改：

#wrapper .main：添加了position:absolute（“固定”到父级） #wrapper .container-scroll：添加了position: relative（确定要“修复”到哪个父级） 在主 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";

【讨论】：

完美！非常感谢@Tiij7 .. 恭喜！