Question

我创建了允许选项卡的模态窗口，但是如果有比窗口更多的选项卡，我想为它们提供滚动。在Y轴上创建的滚动具有不适合窗口大小的选项卡。它们落入行中，因而被隐藏;他们可以分别滚动，但他们跳2-3（取决于连续多少）。我想顺畅地滚动X，例如Firefox。我不想要使用jQuery。

HTML：

<div class="drsMoveHandle" id="title_<?php echo $mwModalId?>" style="display:block;" >
<div class="drsMoveHandleContent active" id = "titleContent_<?php echo $mwModalId?>" title="<?php echo $mwTitleContent?>" style="left:0px;">
    <?php echo $mwTitleContent?>
</div>

drsMoveHandle - 标签的容器（每个框一个）

drsMoveHandleContent - 相同的标签（可能有几个）

CSS：

.drsMoveHandle {
position:absolute;
top:0px;
width:100%;
height: 20px;
padding-left:20px;
background-color: #D9D9D9;
cursor: move;
overflow-y:auto;
overflow-x:hidden;
white-space: nowrap;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;}

.drsMoveHandleContent {
position:relative;
height: 19px;
float:left;
top:0px;
cursor:alias;
overflow:hidden;
white-space: nowrap;
background-color:#E5E5E5;
border-top: 1px solid #000;
border-right:1px solid #000;
border-top-left-radius:9px;
border-top-right-radius:9px;
text-overflow: ellipsis;
padding-right:15;
padding-left:10;
display:inline-block;}

JavaScript的：

function canselEvent(e){
e = e || window.event;
if(e.preventDefault && e.stopPropagation){
    e.preventDefault();
    e.stopPropagation();
}
else {
    e.returnValue = false;
    e.cancelBubble = true;
}
return false;}

function wheel(e) {
e = e || window.event;
var delta = 0;    
if(e.wheelDelta) delta = e.wheelDelta/120;
else if(e.detail) delta = -e.detail/3;
delta *= 20
var scrollDiv = e.target.parentNode || e.srcElement.parentNode;
scrollDiv.scrollTop = scrollDiv.scrollTop - delta;
//scrollDiv.scrollLeft = scrollDiv.scrollLeft - delta;
canselEvent(e);}

function prepareScrollebleDiv(elms) {
var scrollDiv;
for(var i=0; i<elms.length; i++) {
    scrollDiv = document.getElementById(elms[i].id);
    if (scrollDiv.addEventListener) scrollDiv.addEventListener('DOMMouseScroll', wheel, false);
    scrollDiv.onmousewheel = wheel;
}}

Answer 1

发明了解决方案（如果你有更好的 - 写）：

CSS：

自：

 .drsMoveHandle {
 ...
 width:100%;
 height: 20px;
 padding-left:20px;
 ...}

要：

.drsMoveHandle {
    ...
    width:2000px;
    left:-1000px;
    height: 20px;
    padding-left:1020px;
    ...
}

的JavaScript;

需要重写功能轮：

不需要滚动，你需要改变左边的位置：

scrollDiv.style.left = parseInt(scrollDiv.style.left) + delta;

解决方案不是最好的，但它确实有效。

在模态窗口中实现可滚动选项卡

1 个答案: