小编Jes*_*ica的帖子
滚动列表时,Sublime Text自动完成窗口关闭
使用up或滚动自动完成列表时down,如果在任一方向上走得太远(例如,没有更多建议),列表将关闭.
我想要的行为是在到达结束而不是关闭时使列表换行.
通过分配此热键,可以通过向下滚动轻松修复:
{ "keys": ["down"], "command": "auto_complete", "context":
[ { "key": "auto_complete_visible" } ]
},
这是因为该auto_complete命令具有内置功能,可以在每次调用时向下滚动,这就是热键的工作原理.
......但向上滚动是不同的.我尝试了大约20种不同的热键和宏组合但没有成功.
我几乎可以肯定,实现这种行为的唯一方法是使用插件,但不幸的是我的Python技能等级为零.
如果重要,我用ctrl+ 手动调用自动完成space(自动弹出窗口被禁用).
我正在使用Sublime Text 2.
推荐指数
解决办法
查看次数
使用Flexbox时,Top会被切断
我正在使用flexbox进行布局div's.当我有很多li's内部div(每个li宽度为100%/ 3)时顶部被切断.所以我在网上搜索,他们说要插入margin: auto内部div.当我这样做时,我遇到了一个新问题.让我演示给你看:
随着margin: auto 不适用:
body, html {
height:100%;
margin: 0;
padding:0;
}
#outerWrapper {
background-color: aqua;
height: 100%;
display: flex;
justify-content: flex-start; /* This is ignored */
align-items: center;
overflow: auto;
}
#innerWrapper {
/* margin:auto; /* If this line is removed, then it does flex-start, but the top is cut off */
width: 70%;
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: …推荐指数
解决办法
查看次数
以固定的可拖动div为中心
我有一个固定的 div,我试图垂直和水平居中.是的,我知道有很多问题和教程可以执行此操作.我检查并按照说明操作.这是我实施的一个:
#draggable {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
现在,我也希望它div可以拖延.所以它应该从屏幕的中心开始,然后用户可以选择拖动它.
问题是,当你开始拖动时,div突然移动得更高.我怎样才能将固定的,可拖动的中心div？
的jsfiddle
$('#draggable').draggable();body {
width: 2000px;
height: 2000px;
background-image: url("http://www.freevector.com/site_media/preview_images/FreeVector-Square-Patterns-Set.jpg");
}
#draggable {
background-color: red;
color: lightblue;
width: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<div id="draggable">Drag Me!</div>编辑我更新了示例.draggable没有设定的高度.
推荐指数
解决办法
查看次数
动画在表演前等待
我正在尝试使用css为元素高度设置动画.我这样做的方式是,我为元素添加了一个触摸事件.该函数将a添加className到应该隐藏的元素,即获得高度为0.
问题是,当单击元素时,div假设高度为0暂停一秒,然后获得所需的高度.似乎动画持续时间越长,它在动画之前等待的时间就越长.
这是相关的代码:
transition: max-height 2s ease-in-out;
var heading = document.getElementById('heading'),
body = document.getElementById('body');
heading.addEventListener('click', hide);
body.addEventListener('transitionend', hideCallback);
function hide() {
body.className = 'hide';
}
function hideCallback(e) {
console.log(e.propertyName);
}#wrapper {
margin: auto;
background-color: blue;
width: 470px;
text-align: center;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
max-height: 400px;
max-width: 600px;
padding: 0;
}
#buttonContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: …推荐指数
解决办法
查看次数
以百分比形式获取游标位置
我正在尝试创建自定义范围滑块.我无法以百分比(即1 - 100)获得游标位置.
这是相关的代码:
var cursorPosition = e.clientX - startPoint.left - cursorRadius;
cursorPosition = clamp(cursorPosition, startPoint.left- cursorRadius, sliderDimention- cursorRadius*2);
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
我尝试了以下方法:
console.log((cursorPosition / sliderDimention) * 100);
它几乎正常工作.唯一的问题是,它是-2 - 95(圆形).如何以百分比形式获得sliderCursors位置？
(请不要发布任何JQuery或其他"你可以使用'这个'插件"的答案.我这样做是为了学习目的,我想创建自己的.谢谢!)
的jsfiddle
function RangeSlider( /** DOM Elem */ parentElem) {
var wrapperElem = document.getElementsByClassName('wrapperElem')[0],
slider = document.getElementsByClassName('slider')[0],
sliderCursor = document.getElementsByClassName('sliderCursor')[0];
var sliderDimention = slider.offsetWidth,
cursorRadius = sliderCursor.offsetHeight / 2,
startPoint,
currentTarget;
function sliderDown(e) {
e.preventDefault();
currentTarget = null;
var sliderWithDescendents = wrapperElem.querySelectorAll('*'); …推荐指数
解决办法
查看次数
添加弹跳效果以滚动
我试图创建一个平滑的滚动体验**,当用户过度滚动时,*具有弹跳效果,即滚动太多到底部或顶部.这个答案回答了如何顺利滚动,但我也试图在它滚出界限时反弹.像这样的东西:
注意.虽然这个gif显示为移动设备,但我希望为所有浏览器,桌面设备和移动设备实现这一功能.
我尝试将以下代码添加到间隔:
// 50 = Padding
if (tgt.scrollTop < 50 || tgt.scrollTop > tgt.scrollHeight - tgt.offsetHeight - 50) {
pos = Math.bounce(step++, start, change, steps);
} else {
pos = Math.easeOut(step++, start, change, steps);
}
但它没有产生预期的效果.它不会在正确的滚动时间反弹,反弹不是真实的,它不够大.
(我正在寻找类似这种效果的东西,但我想自己创建它,并理解代码.)
当滚动到顶部或底部时,如何创建弹跳效果？
我不想要链接到复杂库的答案,因为我想自己创建它.我想要vanilla JavaScript.
的jsfiddle
console.clear();
/* Smooth scroll */
Math.easeOut = function(t, b, c, d) {
t /= d;
return -c * t * (t - 2) + b;
};
// Out Back Quartic
Math.bounce = function(t, b, …推荐指数
解决办法
查看次数
element.scrollTop始终返回0
我试图获取元素的scrollTop位置,但它总是返回0.我做错了什么,我该如何解决？
的jsfiddle
var inner = document.getElementById('inner');
window.addEventListener('scroll', function() {
console.log(inner.scrollTop);
})#outer {
background-color: tan;
height: 1000px;
}
#first {
background-color: bisque;
height: 200px;
}
#inner {
background-color: aquamarine;
height: 100px;
}<div id="outer">
<div id="first"></div>
<div id="inner">scrollTop always returns 0</div>
</div>推荐指数
解决办法
查看次数
使用Flexbox垂直居中div
我试图div垂直居中,使用flexbox.我有li's一个高度height:100px.然后我尝试垂直居中,如下所示:align-items: center顶部被切断.
如何在Flexbox没有顶部被切断的情况下垂直居中使用？
这是JSFiddle,这里是代码片段:
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
#flexWrapper {
display: flex;
justify-content: center;
background-color: aqua;
height: 100%;
align-items: center;
/* This statement makes the problem */
overflow: auto;
}
#flexContainer {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
}
li {
background-color: tomato;
border: 1px solid …推荐指数
解决办法
查看次数
Div超越了其父元素
我正在尝试创建一个自定义滚动条,我正在使用translate3d滚动.唯一的问题是,当你一直滚动到底部时,拇指(卷轴)走得太远了.我正在使用公认的公式,但由于某种原因,它超过了它的父包装器.这是公式:
scrollPosition * scrollBarThumb_height / content_height
我做错了什么,如何让拇指完全留在父母视野中？
的jsfiddle
console.clear();
var innerWrapper = document.getElementById('innerWrapper');
var scrollBar = document.getElementById('scrollbar');
var scrollBarThumb = scrollBar.firstElementChild
scrollBarThumb.style.height = (innerWrapper.offsetHeight * innerWrapper.offsetHeight / innerWrapper.scrollHeight) + 'px';
innerWrapper.addEventListener('mousewheel', handleScroll);
innerWrapper.addEventListener('DOMMouseScroll', handleScroll);
innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)';
function handleScroll(e) {
// Prevent parents from scrolling
e.preventDefault();
var direction = (e.detail < 0 || e.wheelDelta > 0) ? 1 : -1; // 1 = scroll down, -1 = scroll
var start = parseInt(innerWrapper.style.transform.split(',')[1], 10);
var scrollPosition = …推荐指数
解决办法
查看次数
在三角形元素上添加边框
我想在三角形周围创建一个边框.到目前为止我有这个:
的jsfiddle
.myDiv {
width: 300px;
padding: 15px;
text-align: right;
background-color: lightblue;
position: relative;
border: 1px solid black;
}
.myDiv::before {
content: "";
position: absolute;
bottom: -20px;
right: 20px;
border-right: 20px solid lightblue;
border-bottom: 20px solid transparent;
}<div class="myDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</div>但我无法为before元素添加边框.如何在底部伸出的部分周围添加边框('before`元素)？
(我看到了这个问题,但我不能对此应用相同的原理,因为它的形状不同.)
推荐指数
解决办法
查看次数
标签 统计
css ×8
javascript ×6
html ×5
flexbox ×3
animation ×1
autocomplete ×1
dom ×1
formula ×1
jquery ×1
jquery-ui ×1
math ×1
scroll ×1
sublimetext ×1
sublimetext2 ×1
sublimetext3 ×1