Question

我正在尝试制作一个固定的框，980px width和500px height在100% width和1500px height的div中滚动，但它根本不起作用。< / p>

这就是我所做的：https://jsfiddle.net/zjuyuhmz/2/embedded/result/

当页面滚动时，框正在移动，我只想在鼠标位于div内部时才进行滚动。

这可能吗？

HTML：

<div id="wrapper">
    <div class="main">
        <div class="container">
            <div class="container2">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
        </div>
    </div>
</div>

的CSS：

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    color: #a3265e;
    font-family: 'GillSans-SemiBold';
}
.main {
    border: 1px solid red;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 380px;
}
.container {
    border: 1px solid green;
    position: relative;
    width: 100%;
    height: 500px;
    margin: 0 auto;
    overflow: scroll;
}
.container2 {
    height: 1500px;
    margin: 0 auto;
}
.test {
  width: 940px;
  height: 500px;
  position: fixed;
  left: 50%;
  margin-left: -480px;
  background: black;
}

Answer 1

您需要编写javascript代码，您可以在其中获取光标位置并依赖于启用滚动事件。

Answer 2

替换.test的css：

.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}

.test:focus {
position:fixed;
}

这意味着：当id为＃＆＃34; test＆＃34;重点关注，确保其定位。如果没有，请将其置于绝对位置。

如何在可滚动的div中固定940px宽的盒子？

2 个答案: