We Keep Coding

Is it possible to apply scroll-snap by line of text?

I have a vertical smooth-scrolling div with various ID/anchors scrolled to by user interactions. I'd like to apply scroll snapping by line, so if the user were to scroll back up or down, the container will always have the top-most line scrolled fully into view. Is this possible?

Is it possible to split an elements viewport with javascript/html/css?

I would like to implement a split "viewport" and i'm wondering if it is possible in javascript/css/html.
What I mean is, a scroll area that scrolls similar to a book, where the content that overflows vertically on the left half is shown in continuation on the right. Similar to CSS columns but for a scroll area.
I've played with the idea quite a bit, and the only solution I can think of is to essentially duplicate the content in the left pane in the right pane, synchronize the scroll event, and offset the right area by the element height.
Here is a basic example I made:
https://amazing-thompson-651a40.netlify.app/
However, I'm wondering if there is a solution that doesn't require duplicating the DOM structure of the left pane onto the right. For example is it possible to access the view port/rendering engine directly and show what is "actually" overflowing the scrollarea, and offset it on the page?

Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window

I have a div that is taller than the window but is contained within a certain width. This causes the div to get a horizontal scrollbar at the very bottom. The problem with this is it makes it hard for users to scroll left and right within the div.
I would like to know if it is possible to attach a scrollbar to the bottom of the screen until the user scrolls down to the bottom of the div.
To give you an idea of what I would like to accomplish. Codrops created a nice table that once you scroll past the table header it attaches its self to the top of the screen. Here is the demo of that http://tympanus.net/Tutorials/StickyTableHeaders/. I want to do this but with a scrollbar attaching to the bottom of the screen. I am sorry I can't provide things I have tried, because I don't even know where to start when trying to accomplish this.

You can create empty container with the same width as your div and set it to fixed position. Then sync scrolling position of these 2 DIVs using jQuery. Example on jsFiddle.
jQuery(function($){
$('.content').on('scroll', function(){
$('.scroller').scrollLeft($(this).scrollLeft());
});
$('.scroller').on('scroll', function(){
$('.content').scrollLeft($(this).scrollLeft());
});
});
Hiding/showing external scrollbar depending on page scroll offset is left for you as homework :)

How do I imitate Gmail's "Swipe to delete" in KendoUI ? Example included

I am trying to recreate Gmail (on Android's) "swipe to delete" interface. In this GUI the user can
Swipe left or swipe right, and the entire list item moves with the thumb.
After it is swiped more than X distance, the item swooshes away and is replaced with an "undo" icon
Releasing the row, if X distance hasn't been reached, should put the object in its original place.
If a second item is swiped, and an undo box is showing from a previous swipe, that row is deleted, and the animation and logic starts all over from scratch.
I have a demo of this working here, but it doesn't seem to perform too well. http://jsbin.com/EWUbeTI/2/edit
Is there a more efficient way to handle this animation?

This one is primarily about positioning and handling a lot of touch events. There are two divs placed on top of one another. Each is absolutely positioned to pull this off.
Top Div (Email)
When a drag occurs, the top div alters its left position by the drag delta IF that delta is negative (moving left) and the current left value of the row is not greater than 0 (prevents a right drag). When the dragging stops, if the row has been moved at least 25% of the width of the container, we assume the user wants to commit and we go ahead and slide it all the way off. Otherwise we set its left back to zero and then animate it back in as a canceled drag.
Bottom Div (Archive)
The bottom div doesn't move, but handles the touch of the area. If the touch occurs on the button, the item is collapsed (you could slide as well). A smooth collapsing requires you to remove the padding kendo ui mobile sets on the element.
http://jsbin.com/AfoQUKoQ/2/edit
NOTE: This implementation is very specific to the iOS 7 skin and wont work right with others due to the specific CSS styling
Hopefully this gets you moving in the right direction.

For mobile webkit, how can I make the horizontal menu bar scrollable when you touch/drag it?

Let's say I'm on the standard iPhone 4.
My menu bar is 2000px in width. When the user touches and holds on the menu div, he can move his finger left/right, and the menu bar will move. This allows the user to browse all of the menu's items using his finger. (Scrolling left/right)
How can I make that in javascript/jquery?
It's like the Google Images webview (go there on your phone). You're able to swipe left and right to navigate each image.
Except...I want it to be a menu bar, with no "snapping".

Here's a very very basic example. It should get you moving in the right direction though.
$('body').bind({
'touchmove': function(e){
$('.menu_bar').css({
'left': e.originalEvent.touches[0].pageX
});
}
});
To get where you're headed you'll need to also store the touchstart coordinates, the .menu_bar start position and then use a bit of math to move the bar relative to it's position rather than just snapping to the finger position each time like the example above will do.
Hope that helps :)

I'm still a little confused by the question but I believe the answer is just to use
-webkit-overflow-scrolling: touch;
This will work for iOS5 devices and give you a small scroll bar when active (i.e. when scrolling)
Otherwise you could try this plugin: http://cubiq.org/iscroll-4
Or: http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/
(which is multi-device)