Dynamic left attr issue on Internet Explorer 11

Question

$('div').css('left' ,$("id").scrollLeft());},

I tried this code to give a div a left attribute that will change depending on the scrollLeft function. It works perfectly on chrome but the content flicks on internet explorer whenever i drag the horizontal scroll.

Any idea on how to fix it?

Answer 1

This is the code I used and it worked in Chrome and IE 11

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert($("#test1").scrollLeft() + " px");
                $('#test2').css('left', $("#test1").scrollLeft());
            });

            $(window).scroll(function () {
                $('#test2').css({ 'left': 20 + $(this).scrollLeft() + 'px' });
            });
        }); 
    </script>
    <style>
        div {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            overflow-x: scroll;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
    <div style="width:1000px;">
        <div id="test1">
            <div style="width:200px;">
                #test1 - Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
            </div>
        </div>
        <br>
        <button>Click Here!</button>
        <div id="test2" style="position:absolute;">
            #test2
        </div>
    </div>
</body>

</html>

Dynamic left attr issue on Internet Explorer 11

Question

1 answers

solution1
0 2018-10-09 12:37:01

Dynamic left attr issue on Internet Explorer 11

Question

1 answers

solution1 0 2018-10-09 12:37:01

solution1
0 2018-10-09 12:37:01