✔ Jenach Inhalt Scrollbar ein/ausschalten

[messmar]

Hallo zusammen,

ich habe gegooglt und hier im Forum recherchiert, aber leider nicht fundig geworden.

Folgendes:
Ich habe innerhalb eines DIVs eine Liste

<ul><li></li></ul>

. Jede Liste beinhaltet
ein Bild/Image, und diese Bilder haben unterschiedliche Höhe.

Der DIV, wo die Bilder eingebettet sind, hat eine Höhe von z.B. 500px und es wird gescrolllt

height:500px; overflow:auto;

sobald das Bild höher als der DIV ist, damit der User das ganze bild sehen kann dann... das Übliche halt.

Das Ganze ist eingelich ein Slider (der sichtbare Bereich ist 350px breit) und über diesen Slider gibt's 4 Links, die wenn sie geklickt werden, wird dann das entprechende Bild (in dem sichtbaren Bereich) angezeigt bzw. sichtbar.

CODE:

<div class="slider">
  <ul class="inner-slider" style="width:1600px;">
  <li style="display:block; border:1px solid gray;">
  <img src="img/overview/aaa.jpg?locale=de" height="1200" alt="">
  </li>
  <li>
  <img src="img/overview/bbb.jpg?locale=de" height="900" alt="">
  </li>
  <li>
  <img src="img/overview/ccc.jpg?locale=de" height="1600" alt="">
  </li>
  <li>
  <img src="img/overview/ddd.jpg?locale=de" height="600" alt="">
  </li>
  </ul>
</div>

Der Bug:

Die Höhe des ganzen DIVs: "slide" richtet sich nach dem höchsten Bild und das wäre: "ccc.jpg".
Das heißt, dass der DIV bei dem bild: "ddd.jpg" sehr weit nach unten scrollt obwohl das Bild längst zu Ende. Es entsteht ein großer und unnötiger Abstand nach unten in diesem Fall.

Wie kann man das Ganze steuren, so dass das Scrollen bei den kurzesten Images da aufhört, wo das Bild endet? Ich habe einiges (Script, CSS) versucht, aber leider ohne Erfolg.

Ein Tipp bitte oder Besipiel wäre sehr hilfreich.

Danke & Gruß
Messmar

 

[SpiceLab]

height:500px; overflow:auto;

Gilt dieses CSS für das DIV .slider?

Den Bug, dass sich seine Höhe aber nach dem höchsten Bild richtet, kann ich mit den gezeigten Code-Snippets nicht reproduzieren.

Oder ich hab Dich jetzt gründlich mißverstanden

Kannst Du deshalb das Ganze mal auf http://jsfiddle.net demonstrieren?

 

[messmar]

Guten Morgen,

in jsfidle funkt. leider nicht richtig , da das Einbetten des nötigen JS-Frameworks etc. nicht hinhaut.

Hierbei der Basis-Code/das Beispiel, das ich Anfang verwendet hab.

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <style>
  .slider {
  clear:both;
  margin:0 auto;
  width: 400px; height: 300px;
  overflow-y: scroll;
  overflow-x:hidden;
  position: relative;
  }
  .slider > ul {
  position: relative;
  -webkit-transition: .5s left;
  -moz-transition: .5s left;
  -ms-transition: .5s left;
  -o-transition: .5s left;
  list-style: none;
  margin: 0; padding: 0;
  }
  .slider > ul > li {
  float: left;
  width: 400px; height: 300px;
  }
  </style>

<div style="width:600px; height:25px; margin:0 auto; border:1px solid green;">
  <ul style="list-style-type:none; margin:0; padding:0; width:550px;">
  <li style="float:left; width:80px;"><a href="javascript:sliders[0].goTo(0)">.goTo(0)</a></li>
  <li style="float:left; width:80px;"><a href="javascript:sliders[0].goTo(1)">.goTo(1)</a></li>
  <li style="float:left; width:80px;"><a href="javascript:sliders[0].goTo(2)">.goTo(2)</a></li>
  <li style="float:left; width:80px;"><a href="javascript:sliders[0].goTo(3)">.goTo(3)</a></li>
  </ul>
</div>

<div class="slider">
  <ul>
  <li><img src="img/1.png"></li>
  <li><img src="img/2.png"></li>
  <li><img src="img/3.png"></li>
  <li><img src="img/4.png"></li>
  </ul>
</div>

<script>
  var sliders = [];
  $('.slider').each(function () {
  sliders.push(new Slider(this))
  });
</script>

JAVASCRIPT:

var Slider = function () {
  this.initialize.apply(this, arguments);
  };
  Slider.prototype = {
  initialize: function (slider) {
  this.ul = slider.children[0];
  this.li = this.ul.children;
  this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px';
  this.currentIndex = 0;
  },
  goTo: function (index) {
  if (index < 0 || index > this.li.length - 1)
  return;
  this.ul.style.left = '-' + (100 * index) + '%';
  this.currentIndex = index;
  },
  goToPrev: function () {
  this.goTo(this.currentIndex - 1);
  },
  goToNext: function () {
  this.goTo(this.currentIndex + 1);
  }
  };

P.S. Fairnesshalber, muss hier darauf hingewiesen werden, dass der orignal Code von hier stamm(t).
Mein jetziger Code, den ich auf die Seite verwende ist um 5 Fache gewachsen und erweitert worden.

Der, hier eingegeben, Code ist das Ursprung wie er war, aber es gibt eine genauere Beschreibung des Use Cases, von dem ich spreche.

Danke und Grüße
Messmar

 

[messmar]

Hier z.B. ein Versuch das Scrollen jenach sichtbarem Inhalt zu steuern:

...
if( index === 0 ){
  $('.slider').css({ 'overflow' : 'hidden' });
  }
  if( index === 3 ){
   
  var el_03 = $('.el-03').find('img').height() - $('.slider').height();
   
  $('.slider').scroll(function(){
   
  console.log( $('.slider').scrollTop() );
   
  var ee_0 = $(this);

  if( ee_0.scrollTop() > el_03 ){
  $('.slider').css({
  'overflow':'hidden'
  });
  }else{
  $('.slider').css({
  'overflow':'scroll',
  'overflow-x':'hidden'
  });
  }
  });
   
  } else{
  $('.slider').css({ 'overflow' : 'scroll', 'overflow-x' : 'hidden' });
  }
...

<li class="el-03" style="float:left; width:80px;"><a href="javascript:sliders[0].goTo(2)">.goTo(2)</a></li>

Leider funtk. nicht sauber bis zu garnichts.

Danke
Messmar

 

[SpiceLab]

in jsfidle funkt. leider nicht richtig , da das Einbetten des nötigen JS-Frameworks etc. nicht hinhaut.

Gewußt wie

Die Lösung liegt in Deinem abgewandelten Konzept mit unterschiedlichen Bildhöhen darin, nicht unmittelbar <div class="slider">, sondern je nach Bedarf den Inhalt der <li>-Elemente zu scrollen.

http://jsfiddle.net/spicelab/8xmbx4q0/

 

[messmar]

UPS!

Peinlich... sowas hätte ich wissen/selber rausfinden müssen. Ich denke es liegt daran, dass ich seit ca. 3,5 Wochen keinen Code
geschrieben hab und im Urlaub war... bin komplett aus der Übung - wenn ich so sagen kann -

Es hat zwar ca. ne halbe Std. gedauert bis ich die Anpassungen auf meiner App übetragen und zum laufen bringen konnte - der Code bei mir ist viel
verschachtelt und anders implementiert -, aber das war/ist die Lösung.

P.S. jsfidle ging bei nicht bzw. ich onnte weder Bilder noch Framework einbinden. Ich mach mich schlau dann, warum es so war ;-)

Nochmal vielen Dank!

Grüße
Messmar