<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Горизонтальная прокрутка колесиком мыши</title>
<style>
/* .wrapper::-webkit-scrollbar {
display: none;
} */
.wrapper {
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
.item {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.querySelector(".wrapper");
wrapper.addEventListener("wheel", (event) => {
if (event.deltaY !== 0) {
wrapper.scrollLeft += event.deltaY;
event.preventDefault();
}
});
});
</script>
</body>
</html>
Если следовать этому термину, то все кнопки это бизнес логика, т.к. человек на них нажимает, а результат это логика приложения, верно?
1*multiplier
. А вообще, похоже, что этот код уже сделан гибким - просто измените значение multiplier. func Destruct(s any) (e []any) {
v := reflect.ValueOf(s)
if v.Kind() != reflect.Struct {
return nil
}
for i := 0; i < v.NumField(); i++ {
e = append(e, v.Field(i).Interface())
}
return
}
.brace {
background: lightblue;
margin: 50px; /* эти две строчки только для демо */
width: 40px;
height: 240px; /* ширину и высоту настройте под себя */
transform: perspective(10px) rotateY(1deg); /* здесь вся магия перспективы
*/
border: solid red; /* стили линии */
border-width: 3px 3px 3px 0;
border-radius: 0px 10px 10px 0; /* закругляем только с одной стороны */
}