Question

我在RTL方向的页面时遇到了使用scrollLeft for Safari的问题。在Safari中，当我点击按钮（具有处理程序scrollLeft（-200））时，我将滚动到页面的0位置。这是一个大问题。

Safari：7.0.1 操作系统：OS X 10.9.1

以下代码的结构与我的页面相似，但更容易：

    <!DOCTYPE html>
    <html dir="rtl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>

    <style>
        .main {

        }

        .content {
            direction: rtl; 
            width: 2000px;
        }

        .button-scroll {
            width: 50px;
            height: 50px;
            background: red;
            color: white;
            text-align: center;
            position: fixed;
            left: 10px;
            top: 10px;
            cursor: pointer;
        }

    </style>
</head>

<body>
    <div class="main">
        <div class="content">
            <h1>Header</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, sapiente illo dignissimos odit nisi. Voluptatibus, temporibus, recusandae totam libero architecto veniam unde quod nisi facere perspiciatis fugiat harum odit tenetur.
                </p>        
        </div>
        <div class="button-scroll"></div>
    </div>

<script type="text/javascript">
$(document).ready(function($) {
    $('.button-scroll').bind('click', function(){
        console.log('scrolling... ' + document.body.scrollLeft);
        // $(document.body).scrollLeft(100);
        document.body.scrollLeft -= 100;
        console.log(document.body.scrollLeft);
    })
});
</script>

</body>
</html>

scrollLeft在带RTL的Safari中不起作用

0 个答案: