Section Content Scroller

An attempt to encapsulate scrolling and state management.

by brigand

HTML

<main id="info">
  <section>
    <h2>HTML-Ipsum Info</h2>
    <p>You’ve probably heard of <a href="/tools/lorem-ipsum-generator/">Lorem Ipsum</a> before – it’s the most-used dummy text excerpt out there. People use it because it has a fairly normal distribution of letters and words (making it look like normal English),
      but it’s also Latin, which means your average reader won’t get distracted by trying to read it. It’s perfect for showcasing design work as it should look when fleshed out with text, because it allows viewers to focus on the design work itself, instead
      of the text. It’s also a great way to showcase the functionality of programs like word processors, font types, and more.</p>
    <p>We’ve taken Lorem Ipsum to the next level with our HTML-Ipsum tool. As you can see, this Lorem Ipsum is tailor-made for websites and other online projects that are based in HTML. Most <a href="/How-much-should-web-site-cost.html">web design projects</a>      use Lorem Ipsum excerpts to begin with, but you always have to spend an annoying extra minute or two formatting it properly for the web. </p>
    <p>Maybe you have a custom-styled ordered list you want to show off, or maybe you just want a long chunk of Lorem Ipsum that’s already wrapped in paragraph tags. No matter the need, we’ve put together a number of Lorem Ipsum samples ready to go with
      HTML tags and formatting in place. All you have to do is click the heading of any section on this page, and that HTML-Ipsum block is copied to your clipboard and ready to be loaded into a website redesign template, brand new design mockup, or any
      other digital project you might need dummy text for.</p>
    <p>No matter the project, please remember to replace your fancy HTML-Ipsum with real content before you go live - this is especially important if you're planning to implement a <a href="/content-marketing-strategy.html">content-based marketing strategy</a>      for your new creation! Lorem Ipsum text is...

CSS

*,
htnml,
body {
  overflow: hidden;
}

main {
  height: 300px;
  width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.current {
  background-color: blue;
}

JavaScript

$.fn.linked = function(self) {
  /* if this has an id, it returns all href-linked anchors, if it's an anchor itself, it returns it's target. self includes the original item
   */
  var el = this;
  if (el.length > 1) {
    var grp = el.each(function() {
      return $(this).linked(self);
    });
    if (self) grp.add(el);
    return grp;
  }
  var href = el.attr("href");
  var lnks;
  if (href && href.indexOf("#")) {
    href = "#" + href.split("#")[1];
    lnks = $(href);
  }
  var id = el.attr("id");
  if (id) {
    var anchs = $("a[href='" + id + "']");
    if (anchs.length > 0) {
      if (lnks && lnks.length) {
        lnks = lnks.add(anchs);
      } else {
        lnks = anchs;
      }
    }
  }
  if (lnks && lnks.length) {
    if (self) {
      lnks = lnks.add(self);
    }
  } else {
    if (self) return self;
  }
}

var Scroller;

function ScrollController(props) {
  /*trying to create a utlity class to handle my scrolling functions and to manage the state of the content on scroll */
  props = props || {
    scrollTarget: $("main")
  };
  var scrl = Scroller ? Scroller : {
    isScrolling: false,
    toString: function() {
      return "Scroller"
    },
    init: function(props) {
      this.scrollTarget = props.scrollTarget || $("main");
      this.currentSection = props.currentSection || this.scrollTarget.children("section.current, section").eq(0);
      this.scrollTarget.on("scroll", function() {
        scrl.scroll();
      })
    },
    updateSection: function(sect) {
      if (sect.is(".current")) return;
      sect.siblings("section").linked(false).removeClass("current");
      sect.linked(true).addClass("current");
      this.currentSection = sect;
    },
    scroll: function() {
      if (!this.isScrolling && !this.autoScroll) {
        this.startScroll();
      }
    },
    updateScroll: function() {
      console.log("tick");
      clearTimeout(this.timer);
      if (this.isScrolling) {
        var st = this.scrollTarget.scrollTop();
       ...