Javascript olmadan taşma ile bir div kaydırma

1 Cevap php

I içerikli, statik yüksekliğe sahip bir div var overflow: auto ile kırpılır. Normal masaüstü tarayıcılarda ben içeriğin altına kaydırmak için javascript kullanın. Ancak, javascript olmadan mobil tarayıcılar, ya da tarayıcılarda aynı yapmanız gerekir. Başka gerçek zamanlı olarak ancak tarayıcı içeriğinin alt hale böylece bir şekilde çıkış html + CSS.

Benim emrinde Araçları: HTML, CSS, PHP.

Bu mümkün mü?

1 Cevap

JavaScript olmadan bunu başarmak için bir hile aslında yoktur.

Sizin kaydırılabilir div altındaki bir çapa etiketi koymak, ve daha sonra bu çapa için bir yönlendirme istemek için HTML sayfasında meta yenileme başlığını kullanabilirsiniz. Sadece karma kısmı değişecek çünkü tarayıcı, bu durumda gerçek bir sayfa yenileme algılanmaması gerekir. Bu sadece div altındaki çapa ilerleyin gerekir.

Google Chrome 4.0 aşağıdaki işler, Firefox 3.5.7, Safari 4.0.4, IE 7 ve IE 8:

<html>
<head>
    <meta http-equiv="refresh" content="0; url=#anchor-bottom" />
</head>
<body>
    <div style="overflow: scroll; height: 100px; width: 150px;">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
        ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
        tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
        iriure dolor in hendrerit in vulputate velit esse molestie consequat,
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
        zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
        eleifend option congue nihil imperdiet doming id quod mazim.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis 
        Investigationes demonstraverunt lectores legere me lius quod ii 
        processus dynamicus, qui sequitur mutationem consuetudium lectorum. 
        gothica, quam nunc putamus parum claram, anteposuerit litterarum 
        seacula quarta decima et quinta decima. Eodem modo typi, qui nunc 
        fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer 
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
        veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate 
        claritatem. Investigationes demonstraverunt lectores legere me.</p> 

        <a name="anchor-bottom"></a>

        <p>Mirum est notare quam littera gothica, quam nunc putamus parum
        humanitatis per seacula quarta decima et quinta decima. Eodem modo 
        clari, fiant sollemnes in futurum.</p>
    </div>
</body>
</html>

Opera 10.0 yukarıdaki test ederken, ben görünüşe göre diğer tarayıcılarda aksine, sonsuz bir döngü olarak 0 yorumlar meta yenileme, hafif bir sorunu buldum. Benzer bir sorun, Windows Mobile 6 için IE gerçekleşmesi gibiydi. Bu bir şekilde ele olabilir emin değilim. Bir seçenek çapa etiketi ile birlikte URL'yi kaynağı olacaktır.

Ben de Safari ile iPhone üzerinde test edilmiş ve bu cezası çalışması için görünür.

Yine de mobil tarayıcılarda herhangi bir iç kaydırma yapmadan tam div içeriğini işlemek için daha iyi bir fikir olabileceğini söylemek zorundayım. Mobil tarayıcılarda Çoklu çubukları çok kullanışlı görünmüyor.

etiketler