Ankündigung

Einklappen
Keine Ankündigung bisher.

Wie kann ich den Sprung im Scrollbalken verhindern

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Wie kann ich den Sprung im Scrollbalken verhindern

    Ich habe mir hier eine kleine Routine (Scroller) geschrieben, gibt es tausend mal, ich wollte aber wegen so einer Kleinigkeit nicht jQuery bemühen.

    Das funktioniert auch soweit ganz gut, jedoch stört mich der Sprung des Scrollbalkens nach dem Ende der Transition.

    Hat einer von Euch eine Idee, wie ich das verhindern kann?

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    			*{margin:0px;padding:10px;font-family:"Calibri", sans-serif}
    			#fhw-scroller svg{
    					z-index:1000;
    					position:fixed;
    					bottom:10px;
    					right:10px;
    					cursor:pointer;
    					margin:0;
    					padding:0;
    					display:none;
    					transition: opacity .5s ease-in-out;
    			}
    			.scrolltop{
    					transition: 1s ease-in-out;
    			}
    		</style>
    	</head>	
    	<body>
    		<h1>Überschrift</h1>
    		<p>
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, architecto, nihil, eligendi, explicabo deserunt suscipit illum est voluptates neque repellat maiores quo aliquam magni a dolor laborum accusamus minus fuga ab veniam impedit quis minima modi sint perspiciatis ex corporis! Consectetur quaerat incidunt ut in quae. Atque, dolorem autem commodi quibusdam libero aut reprehenderit. Modi perferendis est sapiente alias! Illo quo eaque eius quas architecto dolorum. At, odit, ducimus inventore deleniti consectetur dolorum minima modi enim repellendus voluptatibus dolorem est. Facilis aperiam minima autem non similique quod quaerat laudantium earum vero consequatur. Commodi, odio, exercitationem, voluptatum saepe itaque nemo vero soluta id necessitatibus nam corrupti amet libero aliquid praesentium totam dolor magnam consequuntur quos veritatis repellendus harum reiciendis voluptatibus corporis! Perspiciatis, accusamus voluptatibus perferendis iusto ducimus. Natus, sit, molestias libero odio dolore modi nesciunt dolorum magni veritatis possimus fugit corporis at ducimus sunt repudiandae! Velit, non, tempora, nemo et porro sed sapiente magnam rem recusandae optio eos illo nostrum eius ipsum aliquam cumque quidem nulla dolorum unde debitis deserunt ipsam labore voluptatem aut culpa consequatur hic reprehenderit nam facere sint. Aliquam, perferendis, nobis modi consectetur dignissimos nisi placeat optio aut incidunt fugit eos explicabo rerum molestiae culpa voluptas quaerat laboriosam.
    		</p>
    		<p>
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dignissimos, quam, minima facere nobis earum aliquid nihil eligendi sunt eveniet vel inventore cum esse impedit atque perferendis necessitatibus? Ut nemo accusantium beatae odit mollitia ex cum ipsam sapiente quis sunt! Unde saepe ducimus incidunt rem magnam aliquid iure quae sequi animi laboriosam. Quidem, soluta nemo a blanditiis repellat. Ullam pariatur sit facere quaerat porro quod adipisci dolore neque. Voluptatibus, sequi, voluptatem, nostrum cum eaque inventore illo reprehenderit dolor doloribus ipsam minus consequatur officiis cumque hic autem sunt illum dolores asperiores fugiat incidunt laudantium tempore nesciunt et sapiente nobis dolore ab aut distinctio itaque enim minima perspiciatis impedit quam! Optio, animi, odio, natus in eligendi explicabo nesciunt ratione non provident possimus ipsum amet pariatur deleniti vel impedit molestiae inventore blanditiis obcaecati asperiores eaque fugit voluptatum quod nulla dolores necessitatibus perspiciatis quaerat voluptas. Inventore eaque nemo facilis cupiditate dolor sed temporibus repudiandae architecto qui! Libero, ex, recusandae, provident, quod nihil quos velit est in enim quaerat quis soluta ipsa minima eligendi quasi cum sunt perferendis delectus ullam sed pariatur. Perspiciatis, sit itaque impedit nesciunt id assumenda architecto natus eligendi numquam quis placeat esse cupiditate repellendus dolores quae quaerat ut soluta maxime quam laborum eaque omnis voluptas accusamus nam adipisci inventore officiis magnam unde dolore est? Rerum, delectus perferendis voluptate numquam asperiores quos iste ea nihil perspiciatis reprehenderit quasi eos hic unde temporibus animi eligendi quis fugiat sequi labore fugit dolor tempore minus architecto corrupti facere eveniet adipisci blanditiis esse inventore! Dolor, velit, accusamus veniam a ut voluptatibus expedita officiis facere eum culpa architecto illo optio iste sapiente aperiam. Vero, ratione sit nihil aliquid veritatis? Asperiores, commodi, quam, repellat, magnam doloremque fugiat dignissimos deserunt recusandae vitae impedit officia labore praesentium iure dolore incidunt saepe animi adipisci. Eos, voluptatibus laboriosam quaerat enim asperiores minus.
    		</p>
    		<p>
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dignissimos, quam, minima facere nobis earum aliquid nihil eligendi sunt eveniet vel inventore cum esse impedit atque perferendis necessitatibus? Ut nemo accusantium beatae odit mollitia ex cum ipsam sapiente quis sunt! Unde saepe ducimus incidunt rem magnam aliquid iure quae sequi animi laboriosam. Quidem, soluta nemo a blanditiis repellat. Ullam pariatur sit facere quaerat porro quod adipisci dolore neque. Voluptatibus, sequi, voluptatem, nostrum cum eaque inventore illo reprehenderit dolor doloribus ipsam minus consequatur officiis cumque hic autem sunt illum dolores asperiores fugiat incidunt laudantium tempore nesciunt et sapiente nobis dolore ab aut distinctio itaque enim minima perspiciatis impedit quam! Optio, animi, odio, natus in eligendi explicabo nesciunt ratione non provident possimus ipsum amet pariatur deleniti vel impedit molestiae inventore blanditiis obcaecati asperiores eaque fugit voluptatum quod nulla dolores necessitatibus perspiciatis quaerat voluptas. Inventore eaque nemo facilis cupiditate dolor sed temporibus repudiandae architecto qui! Libero, ex, recusandae, provident, quod nihil quos velit est in enim quaerat quis soluta ipsa minima eligendi quasi cum sunt perferendis delectus ullam sed pariatur. Perspiciatis, sit itaque impedit nesciunt id assumenda architecto natus eligendi numquam quis placeat esse cupiditate repellendus dolores quae quaerat ut soluta maxime quam laborum eaque omnis voluptas accusamus nam adipisci inventore officiis magnam unde dolore est? Rerum, delectus perferendis voluptate numquam asperiores quos iste ea nihil perspiciatis reprehenderit quasi eos hic unde temporibus animi eligendi quis fugiat sequi labore fugit dolor tempore minus architecto corrupti facere eveniet adipisci blanditiis esse inventore! Dolor, velit, accusamus veniam a ut voluptatibus expedita officiis facere eum culpa architecto illo optio iste sapiente aperiam. Vero, ratione sit nihil aliquid veritatis? Asperiores, commodi, quam, repellat, magnam doloremque fugiat dignissimos deserunt recusandae vitae impedit officia labore praesentium iure dolore incidunt saepe animi adipisci. Eos, voluptatibus laboriosam quaerat enim asperiores minus.
    		</p>
    		<div id="fhw-scroller">
    				<svg width="50" height="50" viewbox="0 0 100 100" name="scrollUpCirc">
    					<style type="text/css" >
    						.hintergrund{fill:#f00;}
    						.linienfarbe {stroke:#fff;stroke-width:18;stroke-linecap:round;}
    					</style>
    					<circle class="hintergrund" cx="50" cy="50" r="50" />
    					<path class="linienfarbe" d="M50 80 L50 20 M50 20 L80 50 M50 20 L20 50"/>
    				</svg>
    		</div>
    		<script>
    			var body, fhwScroller;
    
    			fhwScroller = document.querySelector("#fhw-scroller svg");
    
    			body = document.querySelector("body");
    
    			window.onscroll = function() {
    			  if (this.pageYOffset > 300) {
    				fhwScroller.style.opacity = "0.5";
    				return fhwScroller.style.display = "block";
    			  } else {
    				return fhwScroller.style.display = "none";
    			  }
    			};
    
    			fhwScroller.onmouseover = function() {
    			  return fhwScroller.style.opacity = "1";
    			};
    
    			fhwScroller.onmouseout = function() {
    			  return fhwScroller.style.opacity = "0.5";
    			};
    
    			fhwScroller.onclick = function() {
    			  fhwScroller.style.display = "none";
    			  body.classList.add("scrolltop");
    			  return body.style.marginTop = window.pageYOffset + "px";
    			};
    
    			body.addEventListener("transitionend", (function(_this) {
    			  return function(event) {
    				if (event.target === body) {
    				  body.classList.remove("scrolltop");
    				  body.style.marginTop = "0px";
    				  return window.scrollTo(0, 0);
    				}
    			  };
    			})(this));
    		</script>
    	</body>	
    </html>


  • #2
    Das ist ja schade, 75 views und keine Idee...

    Kommentar


    • #3
      Hallöchen,

      Zitat von kaminbausatz Beitrag anzeigen
      Das ist ja schade, 75 views und keine Idee...
      Was glaubst du denn wie viele von den mittlerweile ~110 Views die Lust hatten, sich den Code manuell in eine lokale Datei oder ein Fiddle zu kopieren um das Fehlverhalten nachvollziehen zu können? Ich schätze niemand. Na ja, ich war mal so nett:

      - Scroll to top (Testcase)

      Ich habe keine großartige Lust mich da jetzt im Detail reinzudenken oder alternative Lösungen zu suchen, aber mir ist auf Anhieb aufgefallen, dass zu Beginn der Scroll-Animation das body-Element ein ordentliches margin-top erhält (Zeile 27). Am Ende der Animation wird dieses schlagartig auf 0 gesetzt (Zeile 34). Das erzeugt zumindest den Sprung. Vielleicht hilft dir das weiter.

      Viele Grüße,
      lotti

      Kommentar


      • #4
        Hi.
        Du könntest z.B den Scrollbalken wärend des automatischen Scrollens verstecken und hinterher wieder Einblenden

        Code:
           fhwScroller.onclick = function () {
                    
                    body.style.overflow = "hidden";            
                  
                 };
        
                 body.addEventListener("transitionend", (function (_this) {
                    return function (event) {
                       if ( event.target === body ) {
        
                          body.style.overflow = "auto";   
        
                       }
                    };

        Kommentar


        • #5
          @lottikarotti

          Du hast recht, beim nächsten mal wird´s gefiddelt. Da die Geschichte mit css3 transitions läuft, muss ich den oberen Rand wieder auf 0 zurücksetzen, sonst habe ich ja einen riesigen Leerraum.

          Aber mal im ernst, es funktioniert wenigsten per c&p was bei vielen anderen Beiträgen ja nicht der Fall ist....

          @Mr. Beer
          Das mit dem style Overflow ist eine gute Lösung - ich habe es nach transitionend auf "scroll" gesetzt...

          Danke

          Nachtrag:
          Die beste Lösung ist das mit dem overflow auch nicht, weil sich der Inhalt dadurch seitlich etwas verschiebt. Ich denke, dass ich dann noch den rechten Rand um die Scrollbalkenbreite verändern muss, damit sich der Inhalt optisch nicht verändert. Evtl. bin ich auch zu pinselig in solchen Sachen.

          Kommentar


          • #6
            Hallöchen,

            Zitat von kaminbausatz Beitrag anzeigen
            Du hast recht, beim nächsten mal wird´s gefiddelt.
            Super

            Zitat von kaminbausatz Beitrag anzeigen
            Da die Geschichte mit css3 transitions läuft, muss ich den oberen Rand wieder auf 0 zurücksetzen, sonst habe ich ja einen riesigen Leerraum.
            Ich will deinen Ansatz mit margin-top jetzt nicht beurteilen ohne mir das genauer angesehen zu haben, aber vielleicht solltest du es auf eine andere Weise probieren: Pure JavaScript scrollTop. Gibt es etwas das gegen den Einsatz dieser Lösung spricht?

            Zitat von kaminbausatz Beitrag anzeigen
            Aber mal im ernst, es funktioniert wenigsten per c&p was bei vielen anderen Beiträgen ja nicht der Fall ist....
            Ein Pluspunkt für dich. Wobei ich gestehen muss, dass ich mir die Mühe nur gemacht habe, weil du in der Vergangenheit durch positive Posts aufgefallen bist - also mir persönlich; nicht wegen deiner grünen Bommel.

            PS: mit jQuery hättest du hier bereits einiges an Zeit und Mühe gespart und durch den Einsatz eines CDN hast du auch in Sachen Ladezeiten / Traffic potentielle Vorteile.

            Viele Grüße,
            lotti

            Kommentar


            • #7
              Ich muss lottikarotti recht geben. Das mit dem Scrollen über CSS ist immer extrem umständlich.

              Vielleicht so?

              Code:
              fhwScroller.onclick = function () {             
                  intvScroll = window.setInterval(function(){
                      window.scrollBy(0,-10);
                      if(window.pageYOffset == 0){
                          clearInterval(intvScroll);
                      }
                  }, 10);
              };
              ( http://jsfiddle.net/p9doy0mc/ )

              ist auf jeden Fall sauberer.

              Kommentar


              • #8
                Im Grunde habt Ihr beide recht, das mit den CSS-transitions ist zur Zeit noch etwas krüppelig. Es sieht allerdings durch diese ease Geschichten ganz nett aus. Dieser Effekt wurde sehr gut in die stackoverflow Routine eingearbeitet.

                Ich werde das nehmen - zumindest solange, bis die transitions einheitlich gut mit %Angaben funktionieren.

                Dafür vielen Dank Euch beiden.

                Mit jQuery habe ich keine Probleme, setze es bei größeren Geschichten auch gerne ein. Mich stört nur, dass die Dateigröße der Library´s inzwischen die der eigentlichen Seiteninformationen übersteigt.

                Mit der Mühe hält sich in Grenzen, ich mache es i.d. Regel mit coffeeScript, das erklärt auch die returns am Ende der Funktionen...

                Kommentar

                Lädt...
                X