Yapışkan iPhone titremesini konumlandırma

10

Kodumun küçük bir parçasını takip ediyorum. Sadece "iphone" hücresi neden sadece iphone titriyor bilmek merak ediyorum. PS. Yapı için tablo veya liste kullanamıyorum. Ben de kullanmayı denedim transform: translate3d(0,0,0);.

Temelde iPhone ve iPad'de Sol ve Üst için de yapışkan olmak için ilk hücreye ihtiyacım var. Bunu sadece HTML ve CSS kullanarak yapmak istiyorum.

ÖNEMLİ

Lütfen, sabit çözümlerle cevap vermeyin, masanın vücuda nereye yerleştirileceğini bilmiyorum. Bir başlık, bazı içerikler vb. Olacaktır.

Kod snippet'ini göster

html  css 
— Vixed
kaynak
Bu kod snippet'ini gerçek bir iPhone ile kontrol ettiniz mi? çünkü bana iyi geliyor.
— Sanira
Tabii ki @Sanira
— Vixed
Muhtemelen bununla ilgili bir şey: github.com/ampproject/amphtml/issues/…
— BugsArePeopleToo
1
@BugsArePeopleToo aynı sorun gibi görünmüyor. Yani sadece bir hücrede sorunum var, hepsinde değil.
— Vixed
@Vixed tablonun ilk satırının yalnızca bir hücresini mi yoksa hücresini mi yapıştırmak istiyorsunuz?
— Deepu Reghunath

Yanıtlar:

8

İOS ile tuhaflıklara karşı her zaman diğer her şeyle mücadele ediyorum. Genellikle bağlam konularını istifleme içerir. Bana öyle geliyor ki position: stickyve left: 0öğesi iOS'taki ilk satıra göreli hale geliyor. iOS, yığınlama bağlamını diğer tüm tarayıcılarla aynı şekilde işlemez.

Buna neyin sebep olduğunu tam olarak anlayamadım. Teknik olarak iPhone hücreniz, kaydırma yaparken bile sola yapışmış çünkü sahip olmadığı ana öğeye göre left: 0. Bunun iOS'un nasıl işlediğiyle ilgili olduğunu varsayıyorum position: sticky. Yapışkan göreceli olarak başlar ve sonra sabit olarak değişir. Bu noktadaki diğer tüm tarayıcılar sola yapışmasını sağlar. Bir position: sticky;öğenin içinde bir position: sticky;öğeniz var. Bu yeni bir yığın bağlamı. İOS'un beklediğiniz gibi değil, ebeveynine sabitlediğine inanıyorum. Üst satırdaleft: 0diğer her şeyi kaydıracak. Umarım bu yardımcı olur. Titreşim görmedim, ancak iOS 13'ün kaydırma ve yığınlama içeriğiyle çıktıktan sonra şirketimin web çerçevesinde birkaç kırık bileşenim vardı. Birden fazla iOS cihazında test ederdim.

onunla biraz daha oynadıktan sonra düzenleme , bir yığın bağlam sorunu olduğuna eminim. Z-endeksini sadece iphone hücresinde 1000'e kadar krankladım ve STILL altındaki satırlar bunun üstünde görünüyor.

resim açıklamasını buraya girin

Internet explorer'ı desteklemeniz gerekmiyorsa, bu düzeni elde etmek için CSS ızgaralarını kullanırdım. O zaman endişelenmene gerek yokposition: sticky

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/using-css-grid-the-right-way/

İş uygulamalarındaki ağır veri dinamik içeriği için kullanıyorum, böylece düzgün bir şekilde kullanılırsa inanılmaz derecede esnek olabilir.

Yine Güncellendi - DOM'u hiç değiştiremiyorsanız, ızgara çözümü bile bazı öğelerin etrafına sarıcı gerektireceği için titremeyle uğraşmak zorunda kalacaksınız. Sadece açıklığa kavuşturmak için .... Bir ızgara çözümü ile kaç sütun veya satır olacağını bilmenize gerek yok. Bu açıdan asılmış gibisin. Izgara alanları da yeni bir yığın içeriği oluşturur ve esnek birimlere izin verirken her şeyi içinde bulunduğu ızgara alanına göre yapar. Dinamik verilerinizin nasıl geldiğini gösterene kadar size cevap veremem. Size bir kod çözümü sunmak için daha fazla içeriğe ihtiyacımız var.

Yine, başka bir yapışkan elemanın içinde yapışkan konumlandırılmış bir elemanınız olduğu için titreme oluyor. Bu sadece iOS ve bu şekilde kullanmak istiyorsanız, sadece bununla uğraşmanız gerekecek.

İşte yığın bağlamları ve nasıl çalıştıklarına dair belgeler. Bir yorumda belirttiğim gibi, farklı bir yaklaşım benimsemeniz ya da bununla ilgilenmeniz gerekecek.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Ayrıca --

HTML ve Gövde'nizdeki taşmayı gizleyin. Masanın etrafına bir sargı koyun. Sargıyı -webkit-overflow-scrolling: autotakın. İOS 12'de çalıştırın ve titremediğini göreceksiniz. Yine de momentum kaydırma yapmayacaksınız. iOS13, -webkit-overflow-scrollinggeçersiz kılınamayacağınız için ihtiyacı ortadan kaldırdı . Eğer değerini koyarsanız touchüzerine -webkit-overflow-scrollingşimdi titreyen alacak. Aşağıdaki kodu çalıştırın ve titreşmediğini göreceksiniz. Uzun lafın kısası, dediğim gibi birçok kez farklı bir yaklaşım bulmanız gerekecek. Bunu şimdi iOS13 kapalı olduğu için düzeltemezsiniz ve gerçekten de momentum kaydırmayı devre dışı bırakmak istemezsiniz.

html {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: auto;
  width: 100%;
  height: 100%;
}
.table {
  width: 2000px;
  position: relative;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh {
  background: #000;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tc.first {
  background: #000;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}
<html>
  <head>
    <link rel="stylesheet" href="css.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="wrapper">
      <div class="table">
          <div class="tr trh">
            <div class="tc first">Iphone</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
            <div class="tc">value</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">2</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
          <div class="tr">
            <div class="tc first">a set</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
            <div class="tc">0</div>
          </div>
        </div>
    </div>
  </body>
</html>
Snippet'i genişlet

— Brett Parsons
kaynak
Merhaba Brett, Cevabınız için teşekkürler. Ne yazık ki satır ve sütun sayısı dinamik olduğundan "grid" kullanamıyorum. Izgara kullanacaksam, bazı JS ile yönetmem gerekecek ve yapamam.
— Vixed
Dinamik içerikle kullanabilirsiniz. Her gün yaparım. Bugün zaman alırsam cevabımı bazı kodlarla güncelleyeceğim.
— Brett Parsons
CSS ızgaraları, örtük ızgara izleri olarak adlandırılanları yapar ve içerik, tanımladığınız açık şablon boyunca yerleştirilir. Dinamik düzenleri kullanarak çılgınca şeyler yaptım.
— Brett Parsons
Sütun sayısını bilmiyorum. Genişlik 100vw değil, daha fazla!
— Vixed
IE'yi desteklemeniz gerekip gerekmediğine ilişkin açıklama için teşekkür ederiz. Şimdi size göstermek için zaman harcayabilirim.
— Brett Parsons
-1

Elemanları yeniden düzenlerseniz, bunu başarabilirsiniz.

body {
  margin: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

.table {
  position: relative;
  width: 100%;
  height: 100%;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  min-height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh,
.tc.first {
  background: #000;
  color: #FFF;
}

.table {
  overflow: hidden;
}

.table-body {
  display: flex;
  height: calc(100% - 102px);
}

.row-head {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-content {
  width: calc(100% - 102px);
  height: 100%;
  overflow: scroll;
}
<div class="table">
  <div class="tr trh">
    <div class="tc first">Iphone</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
    <div class="tc">value</div>
  </div>
  <div class="table-body">
    <div class="row-head">
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
      <div class="tc first">a set</div>
    </div>
    <div class="table-content">
      <div class="tr">
        <div class="tc">1</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">2</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
      <div class="tr">
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
        <div class="tc">0</div>
      </div>
    </div>
  </div>
</div>
Snippet'i genişlet

— Deepu Reghunath
kaynak
Teşekkürler Deepu, ama masanın nerede görüneceğini bilmediğim için sabit değil sabit olmalı.
— Vixed
Soruya açıklama eklendi.
— 8'de Vixed
@Vixed Çözümü güncelledim
— Deepu Reghunath
Gördüm, ama sen bütün domu değiştirdin. Dediğim gibi, bunu yapamam.
— Vixed
@Vixed Sorunuzu yanıtladı, lütfen gönderdiğim çözümü kontrol edin, benimkini yapışkan hale getirdim.
— darligee
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.