<div class="main-container">
      <h1>Controlling Different Content Size</h1>
      <p>We're working with an RSS feed and have had issues with some being much larger than others (content wise). I only want to show the "Read More" button if it's needed.</p>
      <div class="only-so-big">
        <p>This is just a short guy. No need for the read more button.</p>
      </div>
      <hr>
      <div class="only-so-big">
        <p>This one has way too much content to show. Best be saving it for those who want to read everything in here.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
          voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi THE END!</p>
        <p>This one has way too much content to show. Best be saving it for those who want to read everything in here.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
          voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi THE END!</p>
      </div>
      <hr>
      <div class="only-so-big">
        <p>Another small section with not a lot of content</p>
      </div>
      <hr>
      <div class="only-so-big">
        <p>Make Window smaller to show "Read More" button.<br> totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed?</p>
      </div>
    </div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');

*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  font-family: 'Open Sans', sans-serif;
}
h1 {
  text-align: center;
}
.main-container {
  margin: 30px auto;
  max-width: 1000px;
  padding: 20px;
}
.only-so-big p {
  padding: 0;
}
p {
  font-size: 15px;
  line-height: 20px;
}
hr {
  background: #ccc;
  display: block;
  height: 1px;
  width: 100%;
}


/*
  NECESSARY SECTION
*/
.only-so-big {
  background: rgba(178, 252, 255, .5);
  height: 100%;
  max-height: 30vh;
  overflow: hidden;
  /*-webkit-transition: max-height .75s;
  transition: max-height .75s;*/
}

.read-more {
  background: none;
  border: none;
  color: #1199f9;
  cursor: pointer;
  font-size: 1em;
  outline: none; 
}
.read-more:hover {
  text-decoration: underline;
}
.read-more:focus {
  outline: none;
}
.read-more::-moz-focus-inner {
  border: 0;
}
.hid {
  display: none;
}
var allOSB = [];

window.onload = function() {
  // Set Variables
  allOSB = document.getElementsByClassName("only-so-big");
  
  if (allOSB.length > 0) {
    
    // Add read-more button to each OSB section
    for (var i = 0; i < allOSB.length; i++) {
      var el = document.createElement("button");
      el.innerHTML = "Read more";
      el.setAttribute("type", "button");
      el.setAttribute("class", "read-more hid");
      
      insertAfter(allOSB[i], el);
    }
  }

  // Add click function to buttons
  var readMoreButtons = document.getElementsByClassName("read-more");
  for (var i = 0; i < readMoreButtons.length; i++) {
    readMoreButtons[i].addEventListener("click", function() { 
      revealThis(this);
    }, false);
  }
  
  // Update buttons so only the needed ones show
  updateReadMore();
}
// Update on resize
window.onresize = function() {
  updateReadMore();
}

// show only the necessary read-more buttons
function updateReadMore() {
  if (allOSB.length > 0) {
    for (var i = 0; i < allOSB.length; i++) {
      if (allOSB[i].scrollHeight > allOSB[i].clientHeight) {
        if (allOSB[i].hasAttribute("style")) {
          updateHeight(allOSB[i]);
        }
        allOSB[i].nextElementSibling.className = "read-more";
      } else {
        allOSB[i].nextElementSibling.className = "read-more hid";
      }
    }
  }
}

function revealThis(current) {
  var el = current.previousElementSibling;
  if (el.hasAttribute("style")) {
    current.innerHTML = "Read more";
    el.removeAttribute("style");
    //el.scroll({ top: 0, left: 0, behavior: 'smooth' });
    var myScroller = zenscroll.createScroller(el, 1000, 50);
    myScroller.toY(0, 500);
  } else {
    updateHeight(el);
    current.innerHTML = "Done";
  }
}

function updateHeight(el) {
  // el.style.maxHeight = el.scrollHeight + "px";
  el.style.overflow = "auto";
  var myScroller = zenscroll.createScroller(el, 1000, 0);
  myScroller.toY(el.clientHeight - 30, 1000);
  //el.scrollBy({ top: 150, left: 0, behavior: 'smooth' });
}

// thanks to karim79 for this function
// http://stackoverflow.com/a/4793630/5667951
function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}





(function (root, factory) {

if (typeof define === "function" && define.amd) {

define([], factory())

} else if (typeof module === "object" && module.exports) {

module.exports = factory()

} else {

(function install() {

// To make sure Zenscroll can be referenced from the header, before `body` is available

if (document && document.body) {

root.zenscroll = factory()

} else {

// retry 9ms later

setTimeout(install, 9)

}

})()

}

}(this, function () {

"use strict"

// Detect if the browser already supports native smooth scrolling (e.g., Firefox 36+ and Chrome 49+) and it is enabled:

var isNativeSmoothScrollEnabledOn = function (elem) {

return elem && "getComputedStyle" in window &&

window.getComputedStyle(elem)["scroll-behavior"] === "smooth"

}

// Exit if it’s not a browser environment:

if (typeof window === "undefined" || !("document" in window)) {

return {}

}

var makeScroller = function (container, defaultDuration, edgeOffset) {

// Use defaults if not provided

defaultDuration = defaultDuration || 999 //ms

if (!edgeOffset && edgeOffset !== 0) {

// When scrolling, this amount of distance is kept from the edges of the container:

edgeOffset = 9 //px

}

// Handling the life-cycle of the scroller

var scrollTimeoutId

var setScrollTimeoutId = function (newValue) {

scrollTimeoutId = newValue

}

/**

* Stop the current smooth scroll operation immediately

*/

var stopScroll = function () {

clearTimeout(scrollTimeoutId)

setScrollTimeoutId(0)

}

var getTopWithEdgeOffset = function (elem) {

return Math.max(0, container.getTopOf(elem) - edgeOffset)

}

/**

* Scrolls to a specific vertical position in the document.

*

* @param {targetY} The vertical position within the document.

* @param {duration} Optionally the duration of the scroll operation.

* If not provided the default duration is used.

* @param {onDone} An optional callback function to be invoked once the scroll finished.

*/

var scrollToY = function (targetY, duration, onDone) {

stopScroll()

if (duration === 0 || (duration && duration < 0) || isNativeSmoothScrollEnabledOn(container.body)) {

container.toY(targetY)

if (onDone) {

onDone()

}

} else {

var startY = container.getY()

var distance = Math.max(0, targetY) - startY

var startTime = new Date().getTime()

duration = duration || Math.min(Math.abs(distance), defaultDuration);

(function loopScroll() {

setScrollTimeoutId(setTimeout(function () {

// Calculate percentage:

var p = Math.min(1, (new Date().getTime() - startTime) / duration)

// Calculate the absolute vertical position:

var y = Math.max(0, Math.floor(startY + distance*(p < 0.5 ? 2*p*p : p*(4 - p*2)-1)))

container.toY(y)

if (p < 1) {

loopScroll()

} else {

setTimeout(stopScroll, 99) // with cooldown time

if (onDone) {

onDone()

}

}

}, 9))

})()

}

}

/**

* Scrolls to the top of a specific element.

*

* @param {elem} The element to scroll to.

* @param {duration} Optionally the duration of the scroll operation.

* @param {onDone} An optional callback function to be invoked once the scroll finished.

*/

var scrollToElem = function (elem, duration, onDone) {

scrollToY(getTopWithEdgeOffset(elem), duration, onDone)

}

/**

* Scrolls an element into view if necessary.

*

* @param {elem} The element.

* @param {duration} Optionally the duration of the scroll operation.

* @param {onDone} An optional callback function to be invoked once the scroll finished.

*/

var scrollIntoView = function (elem, duration, onDone) {

var elemHeight = elem.getBoundingClientRect().height

var elemBottom = container.getTopOf(elem) + elemHeight

var containerHeight = container.getHeight()

var y = container.getY()

var containerBottom = y + containerHeight

if (getTopWithEdgeOffset(elem) < y || (elemHeight + edgeOffset) > containerHeight) {

// Element is clipped at top or is higher than screen.

scrollToElem(elem, duration, onDone)

} else if ((elemBottom + edgeOffset) > containerBottom) {

// Element is clipped at the bottom.

scrollToY(elemBottom - containerHeight + edgeOffset, duration, onDone)

} else if (onDone) {

onDone()

}

}

/**

* Scrolls to the center of an element.

*

* @param {elem} The element.

* @param {duration} Optionally the duration of the scroll operation.

* @param {offset} Optionally the offset of the top of the element from the center of the screen.

* A value of 0 is ignored.

* @param {onDone} An optional callback function to be invoked once the scroll finished.

*/

var scrollToCenterOf = function (elem, duration, offset, onDone) {

scrollToY(Math.max(0, container.getTopOf(elem) - container.getHeight()/2 + (offset || elem.getBoundingClientRect().height/2)), duration, onDone)

}

/**

* Changes default settings for this scroller.

*

* @param {newDefaultDuration} Optionally a new value for default duration, used for each scroll method by default.

* Ignored if null or undefined.

* @param {newEdgeOffset} Optionally a new value for the edge offset, used by each scroll method by default. Ignored if null or undefined.

* @returns An object with the current values.

*/

var setup = function (newDefaultDuration, newEdgeOffset) {

if (newDefaultDuration === 0 || newDefaultDuration) {

defaultDuration = newDefaultDuration

}

if (newEdgeOffset === 0 || newEdgeOffset) {

edgeOffset = newEdgeOffset

}

return {

defaultDuration: defaultDuration,

edgeOffset: edgeOffset

}

}

return {

setup: setup,

to: scrollToElem,

toY: scrollToY,

intoView: scrollIntoView,

center: scrollToCenterOf,

stop: stopScroll,

moving: function () { return !!scrollTimeoutId },

getY: container.getY,

getTopOf: container.getTopOf

}

}

var docElem = document.documentElement

var getDocY = function () { return window.scrollY || docElem.scrollTop }

// Create a scroller for the document:

var zenscroll = makeScroller({

body: document.scrollingElement || document.body,

toY: function (y) { window.scrollTo(0, y) },

getY: getDocY,

getHeight: function () { return window.innerHeight || docElem.clientHeight },

getTopOf: function (elem) { return elem.getBoundingClientRect().top + getDocY() - docElem.offsetTop }

})

/**

* Creates a scroller from the provided container element (e.g., a DIV)

*

* @param {scrollContainer} The vertical position within the document.

* @param {defaultDuration} Optionally a value for default duration, used for each scroll method by default.

* Ignored if 0 or null or undefined.

* @param {edgeOffset} Optionally a value for the edge offset, used by each scroll method by default. 

* Ignored if null or undefined.

* @returns A scroller object, similar to `zenscroll` but controlling the provided element.

*/

zenscroll.createScroller = function (scrollContainer, defaultDuration, edgeOffset) {

return makeScroller({

body: scrollContainer,

toY: function (y) { scrollContainer.scrollTop = y },

getY: function () { return scrollContainer.scrollTop },

getHeight: function () { return Math.min(scrollContainer.clientHeight, window.innerHeight || docElem.clientHeight) },

getTopOf: function (elem) { return elem.offsetTop }

}, defaultDuration, edgeOffset)

}

// Automatic link-smoothing on achors

// Exclude IE8- or when native is enabled or Zenscroll auto- is disabled

if ("addEventListener" in window && !window.noZensmooth && !isNativeSmoothScrollEnabledOn(document.body)) {

var isHistorySupported = "history" in window && "pushState" in history

var isScrollRestorationSupported = isHistorySupported && "scrollRestoration" in history

// On first load & refresh make sure the browser restores the position first

if (isScrollRestorationSupported) {

history.scrollRestoration = "auto"

}

window.addEventListener("load", function () {

if (isScrollRestorationSupported) {

// Set it to manual

setTimeout(function () { history.scrollRestoration = "manual" }, 9)

window.addEventListener("popstate", function (event) {

if (event.state && "zenscrollY" in event.state) {

zenscroll.toY(event.state.zenscrollY)

}

}, false)

}

// Add edge offset on first load if necessary

// This may not work on IE (or older computer?) as it requires more timeout, around 100 ms

if (window.location.hash) {

setTimeout(function () {

// Adjustment is only needed if there is an edge offset:

var edgeOffset = zenscroll.setup().edgeOffset

if (edgeOffset) {

var targetElem = document.getElementById(window.location.href.split("#")[1])

if (targetElem) {

var targetY = Math.max(0, zenscroll.getTopOf(targetElem) - edgeOffset)

var diff = zenscroll.getY() - targetY

// Only do the adjustment if the browser is very close to the element:

if (0 <= diff && diff < 9 ) {

window.scrollTo(0, targetY)

}

}

}

}, 9)

}

}, false)

// Handling clicks on anchors

var RE_noZensmooth = new RegExp("(^|\\s)noZensmooth(\\s|$)")

window.addEventListener("click", function (event) {

var anchor = event.target

while (anchor && anchor.tagName !== "A") {

anchor = anchor.parentNode

}

// Let the browser handle the click if it wasn't with the primary button, or with some modifier keys:

if (!anchor || event.which !== 1 || event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {

return

}

// Save the current scrolling position so it can be used for scroll restoration:

if (isScrollRestorationSupported) {

var historyState = history.state && typeof history.state === "object" ? history.state : {}

historyState.zenscrollY = zenscroll.getY()

try {

history.replaceState(historyState, "")

} catch (e) {

// Avoid the Chrome Security exception on file protocol, e.g., file://index.html

}

}

// Find the referenced ID:

var href = anchor.getAttribute("href") || ""

if (href.indexOf("#") === 0 && !RE_noZensmooth.test(anchor.className)) {

var targetY = 0

var targetElem = document.getElementById(href.substring(1))

if (href !== "#") {

if (!targetElem) {

// Let the browser handle the click if the target ID is not found.

return

}

targetY = zenscroll.getTopOf(targetElem)

}

event.preventDefault()

// By default trigger the browser's `hashchange` event...

var onDone = function () { window.location = href }

// ...unless there is an edge offset specified

var edgeOffset = zenscroll.setup().edgeOffset

if (edgeOffset) {

targetY = Math.max(0, targetY - edgeOffset)

if (isHistorySupported) {

onDone = function () { history.pushState({}, "", href) }

}

}

zenscroll.toY(targetY, null, onDone)

}

}, false)

}

return zenscroll

}));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.