简体   繁体   English

任何方式应用'webkit-overflow-scrolling:touch'内嵌javascript?

[英]Any way to apply 'webkit-overflow-scrolling: touch' inline with javascript?

have not been able to get this property show up in the DOM via jquery or native javascript. 无法通过jquery或本机javascript在DOM中显示此属性。 jquery doesn't seem to support it and I can't find a native name/syntax that works. jquery似乎不支持它,我找不到有效的本机名称/语法。 Any help?? 任何帮助?

The correct syntax is 正确的语法是

el.style.WebkitOverflowScrolling = 'touch'; // capital W

This is going (nearly) like the usual naming convention from css to JS like border-top is becoming borderTop, ... just that the webkit stuff gets a capical first letter. 这几乎就像从css到JS的通常命名约定一样,border-top正在成为borderTop,...只是webkit的东西得到了一个首字母。

With JavaScript, you need to replace dash - with following capital letter, example: 使用JavaScript,您需要替换破折号-使用以下大写字母,例如:

var el = document.getElementById('element id');
el.style.webkitOverflowScrolling = 'touch';

When using the style property within JavaScript, capitalize letters following dash, so -webkit-overflow-scrolling becomes WebkitOverflowScrolling and make sure to also set overflow to scroll. 在JavaScript中使用style属性时,请使用dash之后的字母大写,因此-webkit-overflow-scrolling变为WebkitOverflowScrolling并确保还设置overflow以滚动。

Try it here: http://jsbin.com/civaha 在这里试试: http//jsbin.com/civaha

You can tell it is touch scrolling because of the bounce. 由于弹跳,你可以说它是触摸滚动。

Source: 资源:

<!doctype html>
<meta name=viewport content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>set touch scrolling in JavaScript - robocat</title>

<script>
function makeScrollable(event) {
    var style = event.target.style;
    style.overflow = 'scroll';
    style.WebkitOverflowScrolling = 'touch'; 
    style.backgroundColor = 'lightyellow';
}
</script>

<body style="margin:0;overflow:hidden;">

<h3>The div below can't scroll until you tap it and it turns yellow, then it can scroll horizontally. . . . </h3>

<div onclick="makeScrollable(event)" style="background-color:lightblue;white-space:nowrap;padding:30px 0;font-size:150%;width:100%;overflow:hidden;">
        Shu' thi gob where there's muck there's brass a pint 'o mild. Be reet will 'e 'eckerslike by 'eck chuffin' nora that's champion. What's that when it's at ooam god's own county. Tha knows nay lad. What's that when it's at ooam. T'foot o' our stairs ah'll box thi ears sup wi' 'im tha daft apeth ah'll gi' thi summat to rooer abaht. Th'art nesh thee ne'ermind. Eeh. How much ah'll gi' thi summat to rooer abaht where's tha bin ne'ermind. How much gerritetten nobbut a lad. Face like a slapped arse bobbar cack-handed. God's own county wacken thi sen up dahn t'coil oil by 'eck dahn t'coil oil th'art nesh thee. A pint 'o mild. T'foot o' our stairs tell thi summat for nowt mardy bum where there's muck there's brass. Chuffin' nora. Sup wi' 'im sup wi' 'im nah then. Dahn t'coil oil tha what will 'e 'eckerslike ah'll learn thi. A pint 'o mild chuffin' nora tha daft apeth shurrup michael palin. Ah'll gi' thi summat to rooer abaht tha what nah then tha knows. Dahn t'coil oil breadcake where's tha bin eeh. Breadcake how much. Bobbar be reet soft southern pansy. Is that thine. God's own county shu' thi gob mardy bum a pint 'o mild. Soft southern pansy breadcake a pint 'o mild.
</div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 iOS:-webkit-overflow-scrolling:触摸和滚动 - iOS: -webkit-overflow-scrolling:touch and scrollTop -webkit-overflow-scrolling:自动; 在触控装置上无法运作 - -webkit-overflow-scrolling: auto; not working on touch devices 移动网络:-webkit-overflow-scrolling:触摸与位置冲突:已修复 - Mobile web: -webkit-overflow-scrolling: touch conflicts with position:fixed scrollLeft通过-webkit-overflow-scrolling自动返回到旧位置: - scrollLeft automatically returning to old position with -webkit-overflow-scrolling: touch 使用-webkit-overflow-scrolling:touch时的当前滚动位置:Safari iOS javascript事件(scrollTop / scrollLeft) - Current scroll position when using -webkit-overflow-scrolling:touch - Safari iOS javascript event (scrollTop / scrollLeft) -webkit-overflow-scrolling:触摸导致jQuery动态更改不显示? - -webkit-overflow-scrolling: touch causes jQuery dynamic changes to not show? 如何在react组件上设置-webkit-overflow-scrolling内联样式 - How to set -webkit-overflow-scrolling inline style on react component scrollTop不能与-webkit-overflow-scrolling一起使用:touch - scrollTop doesn't work with -webkit-overflow-scrolling: touch “-webkit-overflow-scrolling:touch” - 滚动的内容是隐藏的吗? - “-webkit-overflow-scrolling: touch” - scrolled content is hidden? -webkit-overflow-scrolling打破绝对定位 - -webkit-overflow-scrolling breaks absolute positioning
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM