2017-07-27 113 views
0

我需要滚动div的部分并忽略其他部分的滚动。隐藏可滚动标签内滚动

在我的例子中,我需要滚动蓝色和绿色,但要红色留在它的位置。

JSFiddle

<div style="width: 100px; 
 
    height:200px; 
 
    border: solid black 1px; 
 
    overflow-x: auto"> 
 
    <div style="width: 120px; height: 50px;background-color:blue"> 
 
    </div> 
 
    <div style="width: 100px; height: 30px;background-color:red"> 
 
    </div> 
 
    <div style="width: 120px; height: 50px;background-color:green"> 
 
    </div> 
 
</div>

有没有人有一个想法如何解决我的问题?

回答

1

您可以使用position: fixed

#wrapper { 
 
    width: 100px; 
 
    height:200px; 
 
    border: solid black 1px; 
 
    overflow-x: auto; 
 
} 
 

 
#blue { 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color:blue; 
 
} 
 

 
#red { 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color:red; 
 
    position: fixed; 
 
} 
 

 
#green { 
 
    width: 120px; 
 
    height: 50px; 
 
    background-color:green; 
 
}
<div id="wrapper"> 
 
    <div id="blue"></div> 
 
    <div id="red"></div> 
 
    <div id="green"></div> 
 
</div>

+0

非常感谢您的回答。在我的真实代码中,我已经在标签上使用了position:block属性,所以我不能使用fixed。有没有其他方法来修复标签? – user7521838

+0

不客气!如果你想获得高质量的答案,你必须提供所有有意义的信息。如果您可以使用更好地复制您的代码的示例更新您的问题,我将很乐意提供帮助 –

0

执行此change.It工作对我来说:

<div style="width: 100px; height:200px; border: solid black 1px;overflow-x: auto"> 
    <div style="width: 120px; height: 50px;background-color:blue"> 
    </div> 
    <div style="width: 100px; height: 30px;background-color:red;position:fixed;"> 
    </div> 
    <div style="width: 120px; height: 50px;background-color:green"> 
    </div> 
    </div> 

希望这是你想要的。