IOS style alphabetic scroll

Developer
Berkin
Size
3,488 Kb
Views
66,792
  1. IOS style alphabetic scroll Previews
  2. IOS style alphabetic scroll HTML Codes
  3. IOS style alphabetic scroll CSS Codes
  4. IOS style alphabetic scroll JS Codes

How do I make an ios style alphabetic scroll?

What is a ios style alphabetic scroll? How do you make a ios style alphabetic scroll? This script and codes were developed by Berkin on 10 September 2022, Saturday.

IOS style alphabetic scroll Previews
IQ Test

IOS style alphabetic scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iOS style alphabetic scroll</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="container js-abc"> <ul class="abc js-abc-nav"> <li data-alpha="a">A</li> <li data-alpha="b">B</li> <li data-alpha="c">C</li> <li data-alpha="d">D</li> <li data-alpha="e">E</li> <li data-alpha="f">F</li> <li data-alpha="g">G</li> <li data-alpha="h">H</li> <li data-alpha="i">I</li> <li data-alpha="j">J</li> <li data-alpha="k">K</li> <li data-alpha="l">L</li> <li data-alpha="m">M</li> <li data-alpha="n">N</li> <li data-alpha="o">O</li> <li data-alpha="p">P</li> <li data-alpha="q">Q</li> <li data-alpha="r">R</li> <li data-alpha="s">S</li> <li data-alpha="t">T</li> <li data-alpha="u">U</li> <li data-alpha="v">V</li> <li data-alpha="w">W</li> <li data-alpha="x">X</li> <li data-alpha="y">Y</li> <li data-alpha="z">Z</li> </ul> <div class="content js-abc-content"> <div class="text" data-alpha="a">A</div> <ul class="list"> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> </ul> <div class="text" data-alpha="b">B</div> <ul class="list"> <li>BCD</li> <li>BCD</li> <li>BCD</li> <li>BCD</li> <li>BCD</li> <li>BCD</li> </ul> <div class="text" data-alpha="c">C</div> <ul class="list"> <li>CDE</li> <li>CDE</li> <li>CDE</li> <li>CDE</li> <li>CDE</li> <li>CDE</li> <li>CDE</li> <li>CDE</li> <li>CDE</li> </ul> <div class="text" data-alpha="d">D</div> <ul class="list"> <li>DEF</li> <li>DEF</li> <li>DEF</li> </ul> <div class="text" data-alpha="e">E</div> <ul class="list"> <li>DEF</li> <li>DEF</li> <li>DEF</li> </ul> <div class="text" data-alpha="f">F</div> <ul class="list"> <li>DEF</li> <li>DEF</li> <li>DEF</li> </ul> <div class="text" data-alpha="h">H</div> <ul class="list"> <li>DEF</li> <li>DEF</li> <li>DEF</li> </ul> <div class="text" data-alpha="g">G</div> <ul class="list"> <li>DEF</li> <li>DEF</li> <li>DEF</li> </ul> <div class="text" data-alpha="j">J</div> <ul class="list"> <li>DEF</li> <li>DEF</li> <li>DEF</li> </ul> <div class="text" data-alpha="u">U</div> <ul class="list"> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> <li>DEF</li> </ul> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

IOS style alphabetic scroll - Script Codes CSS Codes

* { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
html, body { height: 100%; margin: 0;
}
.wrapper,
.container { height: 100%;
}
.container { position: relative;
}
.content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; -webkit-overflow-scrolling: touch;
}
/* **/
.text { background: #f3f3f3; padding: 10px;
}
.list { list-style: none; margin: 0; padding: 0;
}
.list li { padding: 10px; border-bottom: 1px solid #f3f3f3;
}
.abc { position: absolute; top: 0; right: 0; background: #fff; list-style: none; margin: 0; padding: 0; z-index: 2;
}
.abc li { padding: 5px 10px; margin: -1px 0; text-align: center;
}

IOS style alphabetic scroll - Script Codes JS Codes

(function($, window, document, undefined) { var supportTouch = (function() { return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); })(); var touchEvents = { start: supportTouch ? 'touchstart' : 'mousedown', move: supportTouch ? 'touchmove' : 'mousemove', end: supportTouch ? 'touchend' : 'mouseup' }; var pluginName = 'abcScroll'; function getTarget(e) { var target; if ( supportTouch ) { if ( e.targetTouches.length ) { target = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY); } } else { target = e.target; } return target; } function AbcScroll(container) { var self = this; this.$container = $(container); this.$el = this.$container.find('.js-abc-nav'); this.$content = this.$container.find('.js-abc-content'); this.posList = []; this.$el.on(touchEvents.start + '.abcScroll', this.handleStart.bind(this) ); this.$el.on(touchEvents.move + '.abcScroll', this.handleMove.bind(this) ); this.$el.on(touchEvents.end + '.abcScroll', this.handleEnd.bind(this) ); $('.text').each(function() { var $this = $(this), _data = $this.data(), elOffset = $this.offset(), containerOffset = self.$el.offset(); var scrollPosition = elOffset.top - containerOffset.top; self.posList[_data.alpha] = scrollPosition; }); } AbcScroll.prototype.handleStart = function(e) { var _e = e.originalEvent, target = getTarget(_e); e.preventDefault(); this.setScroll(target); } AbcScroll.prototype.handleMove = function(e) { var _e = e.originalEvent, target = getTarget(_e); e.preventDefault(); this.setScroll(target); } AbcScroll.prototype.handleEnd = function(e) { var _e = e.originalEvent, target = getTarget(_e); e.preventDefault(); this.setScroll(target); } AbcScroll.prototype.setScroll = function(target) { if ( !target ) { return; } var $target = $(target), _data = $target.data(), pos = this.posList[_data.alpha]; if ( pos !== undefined && pos !== this._oldPos ) { this.$content.scrollTop(pos); this._oldPos = pos; } } $.fn[pluginName] = function(options) {	return this.each(function () { if (!$.data(this, pluginName)) { $.data(this, pluginName, new AbcScroll( this, options )); } }); }
})(jQuery, window, document)
$(document).on('ready', function() { $('.js-abc').abcScroll();
});
IOS style alphabetic scroll - Script Codes
IOS style alphabetic scroll - Script Codes
Home Page Home
Developer Berkin
Username berkin
Uploaded September 10, 2022
Rating 3
Size 3,488 Kb
Views 66,792
Do you need developer help for IOS style alphabetic scroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Berkin (berkin) Script Codes
Name
A Pen by berkin
CSS switch, works with swipes
Slider, flickity
Grid paper
Big factorial
Javascript - Bubble Sort
Background origin, content-box
Touch carousel with hammer.js
Merge overlapping intervals
Tether control
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!