BottomScrollFixer : javascript

        บางที element ของเรา อาจจะยาวมากๆ  จนล้นหน้าจอ (window) แล้ว element นั้น  ก็เกิด bottom overflow (overflow-x เป็น scroll หรือ auto) ด้วย

ปัญหา

        ปัญหาที่เจอก็คือ  เราต้องเลื่อน scroll ของ window ลงมาข้างล่างสุดของ element นั้นก่อน  เราถึงจะสามารถเลื่อน scroll X ของ element นั้นได้ (เพราะ element มันล้นจอ)

วิธีแก้

        ผมเลยทำการเขียน javascript ขึ้นมาเพื่อแก้ปัญหานี้  โดยให้มันทำการคำนวนและ fixed bottom scroll ให้โดยอัตโนมัติ  โดยที่เราไม่ต้องเลื่อน window scroll ลงไปข้างล่าง  มันจะ fixed ให้ทันทีที่เราเลื่อน scroll ไปถึง element นั้นตามขนาดที่เราได้ fixed ไว้  (withFixedHeight) โดยไม่จำเป็นต้องเลือนลงไปยังข้างล่างสุดของ element bottom scroll จะเลื่อนตามเราไปเรื่อยๆ  จนกว่าจะพ้น element นั้นๆ

BottomScrollFixer.js

/**
 * @author redcrow
 * create 21/11/2014
 * link http://na5cent.blogspot.com/2014/11/bottomscrollfixer.html
 * 
 * require jQuery
 */
window.BottomScrollFixer = window.BottomScrollFixer || (function($, win) {

    var $win = $(win);

    var Fixer = function(selector) {
        this.$content = $(selector);
        this.contentHeight = this.$content.height();
        this.error = 0;
        this.fixedHeight = 200;
        this.overflowY = this.$content.css('overflow-y');
    };

    Fixer.prototype.withError = function(err) {
        this.error = err;
        return this;
    };

    Fixer.prototype.withFixedHeight = function(height) {
        this.fixedHeight = height;
        return this;
    };

    Fixer.prototype.listen = function() {
        var top = this.$content.offset().top;
        var bottom = this.contentHeight + top;
        var scrollTop = $win.scrollTop();
        var contentTop = $win.height() - this.error;
        var scroll = scrollTop + contentTop;

        var fixed = ((scroll - this.fixedHeight) > top) && (scroll < bottom);
        this.$content.css(fixed ? {
            'height': scroll - top,
            'overflow-y': 'hidden'
        } : {
            'height': 'auto',
            'overflow-y': this.overflowY
        });

        return this;
    };

    Fixer.fixedElement = function(selector) {
        return new Fixer(selector);
    };

    return Fixer;

})(jQuery, window);

ตัวอย่าง
html

<div id="myEelementFixer">
   <div>
       Element นี้ สูง 2,000px และกว้าง 2,000px <br />
       เมื่อ เลื่อน scroll ไปเท่ากับ 200px (withFixedHeight(200))<br /> 
       มันจะเกิด auto fixed bottom scroll ให้<br />
       ในกรณีที่มันไม่เกิด auto fixed scroll ลองค่อยๆ เพิ่มค่า withError(error) ดูครับ 
   </div>
</div>
js
<style>
    #myEelementFixer {
        overflow: auto;
    }
 
    #myEelementFixer > div {
        font-size : 12pt; 
        font-weight : bold;
        padding: 20px; 
        background-color: #fafafa; 
        height: 2000px; 
        width: 2000px;
    }
</style>

(function($, win, BottomScrollFixer) {
    $(function() {
        var $win = $(win);

        var fixer = BottomScrollFixer
                .fixedElement('#myEelementFixer')
                .withFixedHeight(200)
                .listen();

        $win.scroll(function() {
            fixer.listen();
        }).resize(function() {
            fixer.listen();
        });
    });
})(jQuery, window, BottomScrollFixer);

(สังเกต bottom scroll จะเลื่อนตาม)

Element นี้ สูง 2,000px และกว้าง 2,000px
เมื่อ เลื่อน scroll ไปเท่ากับ 200px (withFixedHeight(200))
มันจะเกิด auto fixed bottom scroll ให้
ในกรณีที่มันไม่เกิด auto fixed scroll ลองค่อยๆ เพิ่มค่า withError(error) ดูครับ