javascript - 在 IE9 中滚动是跳跃的-6ren

javascript - 在 IE9 中滚动是跳跃的

转载作者：行者123 更新时间：2023-11-28 06:46:19

我需要创建一个布局，顶部有一个固定的标题栏，用于放置不同的控件，下面有一个大的可滚动 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 - 下拉列表显示不正确的问题

文章推荐： c# - 错误 C2664 - 需要帮助和说明

文章推荐： c++ - 如何从 Mask 中获取减去的视频

html - 修复了滚动时移动设备上的元素高度问题/跳跃
滚动时，我的移动设备底部的固定元素出现问题。看起来每次滚动时都会重新计算高度，因为移动设备上的文档高度增加了。我认为原因是地址栏淡出并且文档视口(viewport)变大了。我进行了很多搜索并尝试了不
java - 数组迭代、跳跃
以下是插入到我自己的哈希表中时进行冲突检测的方法的内部。我正在使用小的测试数字并尝试使我的逻辑正确，变量哈希设置为 0，table.length 为 10。 else {
html - 变换后在元素上移动/跳跃
我正在做一个大元素，之前只用过几次转换，所以我没有太多经验。这次客户对效果有很多要求。我有一个#item，里面有一个按钮和一个透明的div。将鼠标悬停在透明 div 上的 opacity 更改为 0
Java 平均值，跳跃
我是一个十足的 Java 新手。上周一开始，之前从未用任何语言进行过任何编程。因此，如果我发现简单的事情变得复杂，请耐心等待。我收到了一个文本文件。如下图: 第一个数据是时间(午夜过后的秒数)，第二
python - 在pygame中计算重力/跳跃
在 pygame 中计算重力的最佳方法是什么？我基本上只需要它，所以当玩家按下“向上”时，角色会跳跃。到目前为止，这是我的代码(只是一个带有移动的红色 block 的白色屏幕) import pyga
java - Swing 调整大小缓慢/跳跃
我用一个简单的渐变扩展了 JComponent 并调整了paintComponent()方法来制作我自己的BottomBar。然后我将它添加到使用 BorderLayout 的 JFrame 的 S
javascript - 如何用Chart.js实现连续线图中的不连续部分(跳跃)？
我使用 Chart.js 渲染折线图。我不想重新调整 x 轴以获得更多样本点。如果 y 轴值不连续变化，渲染跳跃的最佳方法是什么？理想情况下，我能够为每个 x 值定义两个 y 值。因此，假设我传入
java - java中如何让 Sprite 跳跃？
我有用于左、右、上、下移动的 Sprite 的 KeyEvents。我只是在闲逛，正在考虑另一个我希望 Sprite 跳跃的项目。它不必完全现实，因为我才刚刚开始。我所拥有的是，当按下空格键时，它将导
c# - 让鼠标指针进行 super 跳跃？
我运行双显示器设置。从显示器 1 到显示器 2(或反之亦然)需要大量不必要的鼠标移动。我的想法是利用一个额外的鼠标按钮(我有两个)并让鼠标从显示器 1 上的 XY 坐标超跳(向星际迷航道歉)到显示
javascript - 更改值时防止 slider 跳跃
我有一个 slider 可以实时更新其右侧标签上的值。当值从 1 位值变为 2 位值时，我应该怎么做才能防止它“跳跃”？我怎样才能给标签一个固定的位置，这样它就不会改变布局: var range =
javascript - 光滑的 slider 跳跃
我在页面上使用光滑的 slider 。一切都很好，除了一件事:当我拖动幻灯片时，有时图像或文本会弹起，这看起来非常糟糕。我该怎么做才能避免这个问题？这是我的 code
c++ - SDL C++ 跳跃
const int jumpHeight = 10; //Non-Const variables bool running = true
html - 当折叠的元素很长时 Accordion 跳跃
我有一个 bootstrap Accordion 崩溃，它工作得很好，虽然有一件事困扰着我。当正在展开的元素很长并且做一个垂直滚动条时，它也会使整个页面向左小跳，但只要内容不大，一切都是流畅的。有谁
javascript - SVG 动画跳跃
我开始学习一些 SVG(我想还有 javascript)，并且我很难理解为什么这不顺利。 0 移动了少量(大概是 x 轴上水平的“1”)，但开始大幅跳跃。这是因为我使用的浏览器(Chrome)刷新/重
java - LibGdx - Box2d - 跳跃
我想创建像飞翔的小鸟一样的游戏。我希望玩家在屏幕上连续跳跃。我创建了这段代码，它不像一只飞扬的小鸟跳跃代码: float jump = 100; // Just example if(Gdx.inp
html - 具有相对高度的元素在滚动时改变高度/跳跃(移动)
如下图所示，.hero div 的高度在滚动经过某个点时发生变化(Chrome、Android 6.0.1)。这是相关的CSS .hero { height: 100%; width
css - 如何在鼠标悬停时停止摆动(跳跃)列表菜单项？
当我将鼠标悬停在 li 上时，我有菜单有点摆动。如何停止摆动。代码在这里 JSFiddle 最佳答案摆脱它的最简单方法是像这样修改 css: .inner LI { border: 1px s
python - 如何在不停止整个代码的情况下让 Actor 跳跃？
我试图让 dino 跳跃，但是当我在 dino 跳跃和下落之间使用 time.sleep(0.1) 时，整个游戏停止0.1秒。我试过使用 time.sleep，仅此而已，因为我在网上找不到任何其他有
java - 当用户点击屏幕时使 Sprite 跳跃？
我正在使用 andengine 来实现一个可以使用它在屏幕上拖动的 Sprite 。所以我想做的是当用户点击屏幕上的任何位置时使 Sprite 跳跃。或者向上移动然后向下移动。使用 andeng
android - Webview 抖动/跳跃
我有一个包含 webview 的 viewflipper。在某些情况下(看似随机)，webview 的底部会出现抖动/跳跃。这可以持续一秒到几秒之间的任何时间。这是一个视频来说明我在说什么 http:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 IE9 中滚动是跳跃的