Rendering: This is mainly solved using anchor points and through the scroll-into-view attribute. Upper code: html <template> <view class=”box”> <scroll-view class=”scroll” scroll-y> <view v-for=”(item, index) in p_arr” :key=”item” @click=”scroll(index)” :style=”{ ‘background-color’: active == index ? ‘aquamarine’ : ‘pink’ }”> {<!– –>{item.className}} </view> </scroll-view> <scroll-view class=”content” scroll-y :scroll-into-view=”intoindex” scroll-with-animation> <view class=”contentView” v-for=”(item, index) in p_arr” :key=”item” […]
Tag: scroll
Use html2canvas to convert html to pdf. Due to the horizontal and vertical scroll bars of the table, the display is incomplete (or there are blank spaces)
result: Business: Print the table on the right side of the page into a pdf in the desired format. The first problem encountered is that the table has scroll wheels on the top, bottom, left and right, and html2canvas is equivalent to a screenshot. How to display the scroll area is a problem? The gif […]
UGUI interactive component ScrollView
1. Structure of ScrollView Object Description Scroll View The main object with the Scroll Rect component attached Viewport Scrolling display area, with Image and mask components Content The parent node of the displayed content is only a Rect Transform component Scrollbar Horizontal Horizontal scroll bar Scrollbar Vertical Vertical scroll bar 2. Properties of Scroll Rect […]
css border animation | scroll bar style modification | text color set to gradient…
1. Modify scroll bar style Before setting the scrollbar’s thumb style, you must first set the scrollbar’s width and height, otherwise the effect will not be visible. /* Set scroll bar style */ /* Set the width and height of the scrollbar before setting scrollbar-thumb */ ::-webkit-scrollbar-track {<!– –> border-radius: 0; background-color: #f2f3f8; } ::-webkit-scrollbar-thumb […]
Use of PreferenceKey/preference key, GeometryPreferenceKey/geometry view preference key, ScrollViewOffsetPreferenceKey/scroll view offset preference key
1. Basic use of PreferenceKey preference key 1.1 Create a basic usage view of the preference key PreferenceKeyBootcamp.swift import SwiftUI /// Preferences/Preferences key struct PreferenceKeyBootcamp: View { @State private var text: String = “Hello, world!” var body: some View { NavigationView { VStack { SecondaryScreen(text: text) .navigationTitle(“Navigation Title”) } } .onPreferenceChange(CustomTitlePreferenceKey.self) { value in if […]
CSS scroll-driven animation animation-range
animation-range grammar normal length-percentage timeline-range-name named timeline range named timeline range cover contain entry and entry-crossing exit and exit-crossing compatibility animation-range This property can work on animations driven by two different timelines, scroll progress timeline and view progress timeline, at the same time! Do you still remember the example we saw in view() before? The […]
When there are too many echarts values, the X-axis scrolls and displays. Drag one table to control the two tables to scroll at the same time.
When there are too many echarts values, the X-axis scrolls and displays. Drag one table to control the two tables to scroll at the same time. //Add the following code to both charts axisPointer: {<!– –> //Set to dataZoom and specify the id of dataZoom type: ‘dataZoom’, dataZoomId: this.chartId }, Complete code // Initialize biodiversity […]
ScrollView nested ListView or ExpandableListView has sliding conflicts and height calculation errors.
Problem description ScrollView nested ListView or ExpandableListView has sliding conflicts and height calculation errors. Cause analysis: 1. Android officially does not recommend sliding nesting. The sliding nesting system cannot determine which control the sliding event is triggered in. 2. When ScrollView nests ListView, there will also be a problem that ListView only displays one row. […]
Solve the problem of incomplete exported image data after echarts configures scrolling (dataZoom)
First display an echarts and configure dataZoom. Each page can have up to 10 pieces of data, which exceeds scrolling. <div class=”echartsBox” id=”echartsBox”></div> onMounted(() => { nextTick(() => { var chartDom = document.getElementById(‘echartsBox’); myChart = echarts.init(chartDom); option = { grid: { left: ‘0px’, // Chart left margin right: ’50px’, // right margin of chart top: […]
Regarding the problem of modifying the scroll bar in html
The previous project needed to change the style of the scroll bar one. Modify native style Original address: https://blog.csdn.net/zh_rey/article/details/72473284 The problem is that it is not compatible with browsers such as Firefox and IE, and the amount of code is relatively troublesome. two. jQuery custom content scroller A plug-in that modifies the scroll bar style […]