javascript - 在 IE9 中滚动是跳跃的

标签 javascript html css

我需要创建一个布局，顶部有一个固定的标题栏，用于放置不同的控件，下面有一个大的可滚动 svg 区域，我将在其中放置不同的 svg 元素。该区域将在顶部(时间线)和左侧(位置名称)显示标题。

可滚动区域的行为应该类似于数据 GridView ，列标题在顶部，行标题在左侧，但网格内容没有单元格，只有 svg(或 Canvas )。

这个 jsfiddle 应该让我更好地了解我想要完成的事情(我使用不透明度只是为了查看元素在滚动过程中的行为):

http://jsfiddle.net/serge_s/bLy61krL/2/

HTML:

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Page 1</title>

    <link href="ForStackOverflow.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script src="ForStackOverflow.js?1" type="text/javascript"></script>
</head>
<body>
    <form id="form1">
        <header id="toolbar" class="header">
            <span id="scroll"></span>
            <span>This is my header with controls</span>
        </header>

        <div id="date" class="disp_date">bla-bla</div>

        <svg id="rooms" class="rooms">
        </svg>

        <div id="container" class="container">
            <svg id="times" class="times"></svg>
            <svg id="canv"></svg>


        </div>



    </form>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {

        myLoad();
    });
</script>

Javascript 代码:

var roomWidth = 150, roomHeight = 50;
var timesHeight = 45;
// width of 30 minutes slot
var min30 = 150;
var vscrolled, hscrolled;

var room_count = 30;


function myLoad() {

    $(window).bind('scroll', function (e) { myScroll(); });

    getTimeSlots();
    getRooms();


    // draw something
    var canv = d3.select('#canv');
    for(var i=0; i < 20; i++) {
        var xtime = Math.floor((Math.random() * 30) + 1) * min30;
        var xw = Math.floor((Math.random() * 500) + 1);
        var y = Math.floor(Math.random() * (room_count-1) * roomHeight);
        canv.append("rect")
            .attr("x", xtime)
            .attr("width", xw)
            .attr("y", y)
            .attr("width", roomWidth)
            .attr("height", roomHeight)
            .attr("class","rect2");
    }


}





function getRooms() {
    var d3rooms = d3.select('#rooms');
    var y = 0;
    var text_y = 0;

    for (i=0; i < room_count; i++) {
        var room_name = "Row " + i;
        text_y = y + roomHeight / 2;
        d3rooms.append("rect")
            .attr("class", 'rect')
            .attr("x", 0)
            .attr("y", y)
            .attr("width", roomWidth)
            .attr("height", roomHeight);
        d3rooms.append("text")
            .attr("x", 0)
            .attr("y", text_y)
            .text(room_name);
        y += roomHeight;
    }
    $('#rooms').css({height:y});
    $('.container').css({height:y + timesHeight});
    $('#canv').css({height:room_count*roomHeight});
}



// generate time slot header text
function getTimeSlots() {
    var minutes = ["00", "30"];
    d3svg = d3.select('#times');
    var y = 0, text_y = y + 30;
    for (var hh = 0; hh < 24; hh++) {
        for (var mins = 0; mins < 2; mins++) {
            var time = hh + ':' + minutes[mins] + (hh < 12 ? ' am' : ' pm');
            var rect_x = min30 * (hh * 2 + mins);
            d3svg.append("rect")
                .attr("class", 'rect')
                .attr("x", rect_x)
                .attr("y", y)
                .attr("width", min30)
                .attr("height", timesHeight);
            d3svg.append("text")
                .attr("x", rect_x)
                .attr("y", text_y)
                .text(time);
        }
    }
    $("#times").css({ width: min30 * 48, height: roomHeight });
    $('.container').css({width:min30*48});
    $('#canv').css({top:timesHeight,width:min30*48});

}



function myScroll() {
    vscrolled = $(window).scrollTop();
    hscrolled = $(window).scrollLeft();
    $('#times').css({ top: vscrolled + "px" });
    $('#rooms').css({ left: hscrolled + "px" });
}

CSS:

body {
    margin:0;
}

/* header - this is where the toolbar and running text go */
.header {
    width:100%;
    height: 60px;
    background:lightblue;
    border:1px solid green;
    position: fixed;
    margin:0px auto;
    top:0px;
    z-index:10;
}

/* this is where current date and calendar button go */ 
.disp_date {
    width:150px;
    height:50px;
    background: white;
    position:fixed;
    left:0px;
    top:60px;
    z-index:5;
}

/* room list (vertical) */
.rooms {
    fill:yellow;
    position:absolute;
    left:0px;
    top:110px;
    /*border: 3px solid red;*/
    z-index:2;
    width: 150px;
    height:auto;
}

/* actual room rects */
.rect
{
    fill:green;
    stroke:black;
    stroke-width:1;
    opacity:0.5;
}



/* this is time slots header */
.times {
    position:absolute;
    left: 0px; /*150px;*/
    opacity:0.5;
    z-index:1;
}



/* includes tim slots header, canvas (background grid) and cases */     
.container {
    background:pink;
    position:absolute;
    left:150px;
    top:60px;
}

#canv {
    background:yellow;
    opacity:0.5;
    position:relative;
}

.rect2
{
    fill:blue;
    stroke:black;
    stroke-width:1;
    opacity:0.5;
}

问题是它在 Firefox 或 Chrome 中运行良好，但在 IE9 中非常不稳定。不幸的是，我必须坚持使用 IE9，因为它是一个企业环境。

我想知道我是否可以仅使用 html/ccs 实现相同的可滚动布局，或者是否有人可以告诉我如何避免 IE9 中的不稳定滚动。

我正在学习 html/css。任何帮助将不胜感激。

最佳答案

我对布局和代码进行了更改，它现在也可以在 IE 9 中运行。 Here is a link to fixed JSFiddle

HTML:

    <!DOCTYPE html>
<head runat="server">
  <title>Page 1</title>
</head>
<body>
    <form id="form1">
        <header id="toolbar" class="header">
            <span id="scroll"></span>
            <span>This is my header with controls</span>
        </header>

        <div id="date" class="disp_date">bla-bla</div>
        <div id="divtimes">
            <svg id="times" class="times"></svg>
        </div>
        <div id="divrooms">
            <svg id="rooms" class="rooms"></svg>
        </div>

        <div id="scrl">
            <svg id="canv"></svg>
        </div>

    </form>
</body>

<script type="text/javascript">
   $(document).ready(function () {
      myLoad();
   });
</script>

Javascript:

var roomWidth = 150, roomHeight = 50;
var headerHeight = 60;
var timesHeight = 45;
// width of 30 minutes slot
var min30 = 150;
var vscrolled, hscrolled;

var room_count = 30;
var scrollBarWidth = 0;


function setSizes() {
    $('.header').css({ height: headerHeight});
    $('#scrl').css({ left: roomWidth, top: headerHeight + timesHeight });
    $('.disp_date').css({ height: timesHeight, width: roomWidth, top: headerHeight });
    $('#divrooms').css({ width: roomWidth, top: headerHeight + timesHeight });
    $('#divtimes').css({ left: roomWidth, top: headerHeight });
    $('.rooms').css({ width: roomWidth });


}

function myLoad() {

    scrollBarWidth = getScrollbarWidth();
    // reset css sizes
    setSizes();


    var h = $(window).height() - timesHeight - $('.header').height();
    var w = $(window).width() - roomWidth;
    $('#scrl').css({ height: h, width: $(window).width() - roomWidth });
    $('#divrooms').css({ height: h - scrollBarWidth });
    $('#divtimes').css({ width: w - scrollBarWidth });

    $('#scrl').bind('scroll', function (e) { myScroll(); });
    getTimeSlots();
    getRooms();


    drawGrid();

}


// draw time grid
function drawGrid() {

    var canv = d3.select('#canv');
    var y2 = $('#canv').height();
    for (var i = 0; i < 48; i++) {
        canv.append("line")
            .attr("x1", i * min30)
            .attr("y1", 0)
            .attr("x2", i * min30)
            .attr("y2", y2)
            .attr("stroke", "gray")
            .attr("stroke-width",1);
    }

    var x2 = $('#canv').width();
    for (var i = 0; i < room_count; i++) {
        canv.append("line")
            .attr("x1", 0)
            .attr("y1", i * roomHeight)
            .attr("x2", x2)
            .attr("y2", i * roomHeight)
            .attr("stroke", "gray")
            .attr("stroke-width", 1);
    }



}


// generate time slot header text
function getTimeSlots() {
    var minutes = ["00", "30"];
    d3svg = d3.select('#times');
    var y = 0, text_y = y + 30;
    for (var hh = 0; hh < 24; hh++) {
        for (var mins = 0; mins < 2; mins++) {
            var time = hh + ':' + minutes[mins] + (hh < 12 ? ' am' : ' pm');
            var rect_x = min30 * (hh * 2 + mins);
            d3svg.append("rect")
                .attr("class", 'rect')
                .attr("x", rect_x)
                .attr("y", y)
                .attr("width", min30)
                .attr("height", timesHeight);
            d3svg.append("text")
                .attr("x", rect_x)
                .attr("y", text_y)
                .text(time);
        }
    }
    $("#times").css({ width: min30 * 48, height: roomHeight });
    $('#canv').css({ width: min30 * 48 });




}



function getRooms() {
    var d3rooms = d3.select('#rooms');
    var y = 0;
    var text_y = 0;

    for (i=0; i < room_count; i++) {
        var room_name = "Row " + i;
        text_y = y + roomHeight / 2;
        d3rooms.append("rect")
            .attr("class", 'rect')
            .attr("x", 0)
            .attr("y", y)
            .attr("width", roomWidth)
            .attr("height", roomHeight);
        d3rooms.append("text")
            .attr("x", 0)
            .attr("y", text_y)
            .text(room_name);
        y += roomHeight;
    }
    //$('#divrooms').css({height:y});
    $('#rooms').css({height:y});
    $('#canv').css({height:room_count*roomHeight});
}



function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

function myScroll() {
    vscrolled = $('#scrl').scrollTop();
    hscrolled = $('#scrl').scrollLeft();

    $('#times').css({ left: -hscrolled + "px" });
    $('#rooms').css({ top: -vscrolled + "px" });
}

myLoad();

CSS:

body {
    margin:0;
}

/* header - this is where the toolbar and running text go */
.header {
    width:100%;
    height: 60px;
    background:lightblue;
    position: fixed;
    margin:0px auto;
    top:0px;
    z-index:10;
    overflow:hidden;
}

#scrl {
    overflow:scroll;
    position:absolute;
    left:150px;
    top:105px;
}

/* this is where current date and calendar button go */ 
.disp_date {
    width:150px;
    height:50px;
    background: white;
    position:relative;
    left:0px;
    top:60px;
    z-index:5;
    display:inline;
}

#divrooms {
    overflow:hidden;
    position:fixed;
    left:0px;
    top:105px; /* height of header + times*/
    width: 150px;
}       

#divtimes {
    overflow:hidden;
    position:fixed;
    left:150px;
    top:60px; /* height of header */
}

/* room list (vertical) */
.rooms {
    fill:yellow;
    position:relative;
    left:0px;
    top:0px;
    z-index:2;
    width: 150px;
    height:auto;
    overflow:hidden;
}

/* actual room rects */
.rect
{
    fill:green;
    stroke:black;
    stroke-width:1;
    opacity:0.5;
}



/* this is time slots header */
.times {
    position:relative;
    left: 0px; /*150px;*/
    top:0px;
    opacity:0.5;
    z-index:1;
    overflow:hidden;
}


#canv {
    background:yellow;
    opacity:0.5;
    position:relative;
}

.rect2
{
    fill:blue;
    stroke:black;
    stroke-width:1;
    opacity:0.5;
}

关于javascript - 在 IE9 中滚动是跳跃的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34027068/

上一篇：jquery - 问题单击阵列缩略图以获得全尺寸图像，带有下一个和上一个按钮

下一篇：jquery - 下拉列表显示不正确的问题

相关文章：

javascript - 为 Alexa APL 智能显示设备设置背景颜色

javascript - 使用 Javascript 的语法高亮代码

css - GWT - 第一步 - Div+label+css 样式

jquery - 使用 CSS 关闭 jQuery UI Accordion

javascript - 登录表单的输入验证是否过大？开销 + "too much javascript"问题

javascript - javascript 中带有两个数组的 For 循环

javascript - 如何检查 localStorage 值是否在数组中？

android - 为什么我的按钮的不可见元素在我的响应式设计中移位了？

css - 图像未与其上方和下方的文本水平对齐(960 网格)

html - IE 的 img 修复中的 SVG 破坏了 Chrome

©2024 IT工具网  联系我们